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“网 站 开发 案例 课堂 ”系列 图 书 是 专门 为 网 站 开发 和 数据 库 初学 者 量 身 定做 的 一 套 学 习 
用 书 ， 整 套图 书 涵盖 网 站 开发 、 数 据 库 设计 等 诸多 方面 ， 具 有 以 下 特点 。 

= 前沿 科技 

无 论 是 网 站 建设 、 数 据 库 设计 还 是 HTML5、CSS， 我 们 都 精 选 较 为 前 沿 或 者 用 户 群 最 大 
的 领域 推进 ， 帮 助 大 家 认识 和 了 解 最 新 动态 。 

= 权威 的 作者 团队 


组 织 国家 重点 实验 室 和 资深 应 用 专家 联 裕 编 著 该 套图 书 ， 融 合 丰富 的 教学 经 验 与 优秀 的 
管理 理念 


"学习 型 案例 设计 

以 技术 的 实际 应 用 过 程 为 主线 ， 全 程 采用 图 解 和 同步 多 媒体 结合 的 教学 方式 ， 生 动 、 直 
观 、 全 面 地 剖析 使 用 过 程 中 的 各 种 应 用 技能 ， 降 低 难度 和 提升 学 习 效率 。 
为 什么 要 写 这 样 一 本 书 


随 着 网 络 的 发 展 ， 很 多 企 事业 单位 和 广大 网 民 对 于 建立 网 站 的 需求 越 来 越 强 烈 ， 另 外 对 
于 大 中 专 院 校 ， 很 多 学 生 需 要 做 网 站 毕业 设计 ， 但 是 这 些 读者 又 不 懂 网 页 代码 程序 ， 不 知道 
从 哪里 下 手 ， 针 对 这 些 情 况 ， 我 们 编写 了 此 书 ， 以 期 全 面 带 领 读者 学 习 网 页 设计 和 网 站 建设 
的 全 面 知识 。 通 过 本 书 的 实 训 ， 读 者 可 以 很 快 地 上 和 手 设计 网 页 和 开发 网 站 ， 提 高 职业 化 能 
力 ， 从 而 解决 其 需求 。 


本 书 特 色 


sm ” 零 基 础 、 入 门 级 的 讲解 

无 论 您 是 否 从 事 计 算 机 相关 行业 ， 无 论 您 是 否 接触 过 Dreamweaver 和 动态 网 站 开发 ， 都 
能 从 本 书 中 找到 最 佳 起 点 。 

sm 超 多 、 实 用 、 专 业 的 范例 和 项 目 


本 书 在 编排 上 紧密 结合 深入 学 习 Dreamweaver 开发 动态 网 站 技术 的 先后 过 程 ， 从 
Dreamweaver 的 基本 操作 开始 ， 带 领 大 家 逐步 深入 地 学 习 各 种 应 用 技巧 ， 侧 重 实战 技能 ， 使 
用 简单 易 懂 的 实际 案例 进行 分 析 和 操作 指导 ， 让 读者 读 起 来 简明 轻松 操作 起 来 有 章 可 循 。 


Dreamweaver 动态 网 站 开发 
案例 课堂 b> 

”随时 检测 自己 的 学 习 成 果 

每 章 首页 中 ， 均 提供 了 学 习 目 标 ， 以 指导 读者 重点 学 习 和 检查 。 

每 章 最 后 的 “ 跟 我 练 练 手 ” 板 块 ， 均 根据 本 章 内 容 精 选 而 成 ， 读 者 可 以 随时 检测 自己 的 
学 习 成 果 和 实战 能 力 ， 做 到 融会 贯通 。 

a” 细致 入 微 、 贴 心 提 示 

本 书 在 讲解 过 程 中 ， 在 各 章 中 使 用 了 “注意 ”“ 提 示 ”“ 技 巧 ”等 小 栏目 ， 使 读者 在 学 
习 过 程 中 更 清楚 地 了 解 相关 操作 、 理 解 相关 概念 ， 并 轻松 掌握 各 种 操作 技巧 。 

sa 专业 创作 团队 和 技术 支持 

本 书 由 IT 应 用 实 训 中 心 组 织 编写 并 提供 技术 支持 。 

如 果 您 在 学 习 过 程 中 遇 到 了 问题 ， 可 加 入 QQ 群 ( 群 号 为 221376441) 进 行 提问 ， 届 时 会 
有 专家 人 员 在 线 答疑 。 


“Dreamweaver 开发 动态 网 站 ”学 习 最 佳 途径 


本 书 以 学 习 “Dreamweaver 开发 动态 网 站 ”的 最 佳 制 作 流 程 来 分 配 章 节 ， 从 Dreamweaver 
基本 操作 开始 ， 然 后 讲解 了 网 页 美化 布局 、 动 态 网 站 开发 、 网 站 全 能 拓展 等 内 容 。 最 后 在 项 
目 实战 环节 又 特意 补充 了 两 个 常见 综合 动态 网 站 开发 过 程 ， 以 便 能 更 进一步 提高 读者 的 实战 


技能 。 
中 
第 1 入 网 站 此 副 知 议 是 二 三 下 吉 2 于 上 站 有 2 | 芝 芝 | 要。 厅 
志 ER 
来 格 布 
| 区 RW | | 其 全 于 |< 一 | 曙 权 机 
第 2 篇 网 页 美化 布局 一 一 一 > 使 用 CSS 样 式 才 美 化 网 页 | 训 css+Div 布 局 典型 范例 网 站 的 发 布 
+ 
| 过 | 
一 一 一 一 一 一 一 一 、 
本 习 村 于 alFS PE 使 阳 qrsnt 动态 网站 点 F 
条 让 动态 网 站 开发 "ee se" + P| 
“EE 
网 站 去 全 
第 4 篇 网 站 全 能 拓展 一 一 区 网 站 优化 与 推广 站 | 
= 
超 值 光盘 


口 “全程 同步 教学 录像 
涵盖 本 书 所 有 知识 点 ， 详 细 讲解 每 个 实例 及 项 目 实施 过 程 中 的 关键 技术 ， 让 读者 更 轻松 


Si' 


地 掌握 书 中 所 有 的 Dreamweaver 开发 动态 网 站 知识 。 其 中 的 扩展 讲解 部 分 可 让 读者 得 到 比 书 
中 内 容 更 多 的 收获 。 


口 超 多 容量 资源 大 放送 
赠送 大 量 资源 ， 包 括 本 书 实例 素材 文件 、 教 学 幻灯 片 、 本 书 精品 教学 视频 、 网 页 样式 与 


布局 案例 赏析 、Dreamweaver CS6 快捷 键 和 技巧 、HTML 标签 速 查 表 、 精 彩 网 站 配色 方案 赏 
析 、CSS+DIV 布局 赏析 案例 、Web 前 端 工程 师 常 见面 试题 等 。 


读者 对 象 


没有 任何 Dreamweaver 基础 的 初学 者 。 

有 一 定 的 Dreamweaver 基础 ， 想 精通 动态 网 站 开发 的 人 员 。 
有 一 定 的 动态 网 站 开发 基础 ， 没 有 项 目 经 验 的 人 员 。 

正在 进行 毕业 设计 的 学 生 。 

大 专 院 校 及 培训 学 校 的 老师 和 学 生 。 


创作 团队 


本 书 由 刘 玉 红 策划 ，IT 应 用 实 训 中 心 高 级 讲师 蒲 娟 编著 ， 参 加 编写 的 人 员 有 付 红 、 李 
园 、 郭 广 新 、 侯 永 岗 、 王 月 娇 、 包 慧 利 、 陈 伟 光 、 胡 同 夫 、 梁 云 梁 和 周 浩 浩 。 

在 编写 过 程 中 ， 我 们 虽 尽 其 所 能 ， 将 最 好 的 讲解 呈现 给 读者 ， 但 书 中 也 难免 有 玻 漏 和 不 
受 之 处 ， 敬 请 读者 朋友 不 音 指 正 。 若 您 在 学 习 中 遇 到 困难 或 疑问 ， 或 有 何 建议 ， 可 写 信 发 送 
至 信箱 357975357@qq.com。 
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1.1 认识 网 页 和 网 站 


在 创建 网 站 之 前 ， 首 先 需要 认识 什么 是 网 页 、 什 么 是 网 站 ， 以 及 网 站 的 种 类 与 特点 。 本 
节 就 来 介绍 一 下 它们 的 相关 概念 。 


1.1.1 什么 是 网 页 


网 页 是 Intemet( 国 际 互联 网 ， 也 称 因特网 ) 中 最 基本 的 信息 单位 ， 是 把 文字 、 图 形 、 声 音 
及 动画 等 各 种 多 媒体 信息 相互 链接 起 来 而 构成 的 一 种 信息 表达 方式 。 

通常 ， 网 页 中 有 文字 和 图 像 等 基本 信息 ， 有 些 网 页 中 还 有 声音 、 动 画 和 视频 等 多 媒体 内 
容 。 网 页 一 般 由 站 标 、 导 航 栏 、 广 告 栏 、 信 息 区 和 版 权 区 等 部 分 组 成 ， 如 图 1-1 所 示 。 

在 访问 一 个 网 站 时 ， 首 先 看 到 的 网 页 一 般 称 为 该 网 站 的 首页 。 有 些 网 站 的 首页 只 是 网 站 
的 开场 页 ， 具 有 欢迎 访问 者 的 作用 ， 单 击 页 面 上 的 文字 或 图 片 ， 可 打开 网 站 的 主页 ， 而 首页 
也 随 之 关闭 ， 如 图 1-2 所 示 。 
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图 1-1 网 站 的 网 页 图 1-2 网 站 的 主页 
网 站 的 主页 与 首页 的 区 别 在 于 : 主页 设 有 网 站 的 导航 栏 ， 是 所 有 网 页 的 链接 中 心 。 但 多 


数 网 站 的 首页 与 主页 通常 合 为 一 个 页 面 ， 即 省 略 了 首页 而 直接 显示 主页 。 在 这 种 情况 下 ， 它 
们 指 的 是 同一 个 页 面 ， 如 图 1-3 所 示 。 


1-3 省略 首页 的 网 站 


1.1.2 什么 是 网 站 


网 站 就 是 在 Intemet 上 通过 超级 链接 的 形式 构成 的 相关 网 页 的 集合 。 简 单 地 说 ， 网 站 是 一 
种 通信 工具 ， 人 们 可 以 通过 网 页 浏览 器 来 访问 网 站 ， 获 取 自 己 需要 的 资源 或 享受 网 络 提供 的 
服务 。 

例如 ， 人 们 可 以 通过 淘宝 网 站 查找 自己 需要 的 信息 ， 如 图 1-4 所 示 。 


图 1-4 淘宝 网 网 站 

1.1.3 ”网 站 的 种 类 和 特点 

按照 内 容 和 形式 的 不 同 ， 网 站 可 以 分 为 门户 网 站 、 职 能 网 站 、 专 业 网 站 和 个 人 网 站 等 四 大 类 。 

1. 门户 网 站 

门户 网 站 是 指 涉 及 领域 非常 广泛 的 综合 性 网 站 ， 例 如 国内 著名 的 三 大 门户 网 站 : 网 易 、 
搜狐 和 新 浪 。 如 图 1-5 所 示 为 网 易 网 站 的 首页 。 

2. 职能 网 站 

职能 网 站 是 指 一 些 公 司 为 展示 其 产品 或 对 其 所 提供 的 售后 服务 进行 说 明 而 建立 的 网 站 。 
如 图 1-6 所 示 为 联想 集团 的 中 文官 方 网 站 。 


匡 林 二 en 
tide DEcox| ne ] WE /ere DB Ox | rome ees 
Er Er GT RM 


hz 联想 


个 人 天 守 计 于。 三 关 开业。 尼 当 了 大 名 让 业 。。 服务 556 动 下 载 。 前 由 名和 活 动 


活 


平板 电脑 A3000 
上 市 


图 1-5 “门户 网 站 示例 图 1-6 职能 网 站 示例 
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3. 专业 网 站 

专业 网 站 是 指 专门 以 某 个 主题 为 内 容 而 建立 的 网 站 ， 这 种 网 站 都 是 以 某 一 题材 的 信息 作 
为 网 站 的 内 容 的 。 如 图 1-7 所 示 为 赶集 网 网 站 ， 该 网 站 主要 为 用 户 提供 租房 、 二 手 货 交 易 等 
同城 相关 服务 。 

4. 个 人 网 站 

个 人 网 站 是 指 由 个 人 开发 建立 的 网 站 ， 在 内 容 形式 上 具有 很 强 的 个 性 化 ， 通 常用 来 宣传 
自己 或 展示 个 人 的 兴趣 爱好 。 如 现在 比较 流行 的 淘宝 网 ， 在 淘宝 网 上 注册 一 个 账户 ， 开 一 家 
自己 的 小 店 ， 在 一 定 程度 上 就 宣传 了 自己 ， 展 示 了 个 人 兴趣 与 爱好 ， 如 图 1-8 所 示 。 
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图 1-7 专业 网 站 示例 图 1-8 个 人 网 站 示例 


1.2 ”网 页 的 相关 概念 


在 制作 网 页 时 ， 经 常会 接触 到 很 多 和 网 络 有 关 的 概念 ， 如 浏览 器 、URL、FTP、IP 地 址 
及 域名 等 ， 理 解 与 网 页 相关 的 概念 ， 对 制作 网 页 会 有 一 定 的 帮助 。 


1.2.1 因特网 与 万 维 网 


因特网 (Internet) 又 称 国际 互联 网 ， 是 一 个 把 分 布 于 世界 各 地 的 计算 机 用 传输 介质 互相 连 
接 起 来 的 网 络 。Internet 主要 提供 的 服务 有 万 维 网 (WWW)、 文 件 传输 协议 (FTP)、 电 子 邮 件 (E- 
mail) 及 远程 登录 (Telnet) 等 。 

万 维 网 (World Wide Web，WWW) 简 称 为 3W， 它 是 无 数 个 网 络 站 点 和 网 页 的 集合 ， 也 是 
Internet 提供 的 最 主要 的 服务 。 它 是 由 多 媒体 链接 而 形成 的 集合 ， 通 常 我 们 上 网 看 到 的 内 容 就 
是 万 维 网 的 内 容 。 如 图 1-9 所 示 ， 这 是 使 用 万 维 网 打开 的 百度 首页 。 
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图 1-9 百度 首页 
1.2.2 浏览 器 与 HTML 


浏览 器 是 将 互联 网 上 的 文本 文档 (或 其 他 类 型 的 文件 ) 翻 译 成 网 页 ， 并 让 用 户 与 这 些 文件 交 
互 的 一 种 软件 工具 ， 主 要 用 于 查看 网 页 的 内 容 。 目 前 最 常用 的 浏览 器 有 两 种 : 美国 微软 公司 
的 Internet Explorer( 通 常 称 为 正 浏览 器 )， 美 国 网 景 公 司 的 Netscape Navigator( 通 常 称 为 网 景 浏 
览 器 )。 如 图 1-10 所 示 是 使 用 正 浏览 器 打开 的 页 面 。 

HTML(HyperText Marked Language) 即 超 文 本 标记 语言 ， 是 一 种 用 来 制作 超 文本 文档 的 简 
单 标记 语言 ， 也 是 制作 网 页 的 最 基本 的 语言 ， 它 可 以 直接 由 浏览 器 执行 。 如 图 1-11 所 示 为 使 
用 HTML 语言 制作 的 页 面 。 
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1-10 使 用 IE 浏览 器 打开 的 页 面 1-11 ”使 用 HTML 语言 制作 的 页 面 


1.2.3 URL、 域 名 与 IP 地 址 


URL(Uniform Resource LocatoD 即 统一 资源 定位 器 ， 也 就 是 网 络 地 址 ， 是 在 Internet 上 用 
来 描述 信息 资源 ， 并 将 Internet 提供 的 服务 统一 编 址 的 系统 。 简 单 来 说 ， 通 常 在 下 浏览 器 或 
Netscape 浏览 器 中 输入 的 网 址 就 是 URL 的 一 种 ， 如 百度 网 址 http://www.baidu.com.。 
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域名 (Domain Name) 类 似 于 Internet 上 的 门牌 号 ， 是 用 于 识别 和 定位 互联 网 上 计算 机 的 层 
次 结构 的 字符 标识 ， 与 该 计算 机 的 因特网 协议 QP) 地 址 相对 应 。 但 相对 于 IP 地 址 而 言 ， 域 名 
更 便于 使 用 者 理解 和 记忆 。URL 和 域名 是 两 个 不 同 的 概念 ， 如 http://www.sohu.com/ 是 URL， 
而 www.sohu.com 是 域名 ， 如 图 1-12 所 示 。 

IP(Internet ProtocoD) 即 因特网 协议 ， 是 为 计算 机 网 络 相互 连接 进行 通信 而 设计 的 协议 ， 是 
计算 机 在 因特网 上 进行 相互 通信 时 应 当 遵 守 的 规则 。IP 地 址 是 给 因特网 上 的 每 台 计 算 机 和 其 
他 设备 分 配 的 一 个 唯一 的 地 址 。 使 用 ipconfig 命令 可 以 查看 本 机 的 他 地 址 ， 如 图 1-13 所 示 。 
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1-12 ”搜狐 首页 图 1-13 使 用 IPconfig 命令 查看 IP 地 址 


1.2.4 上 传 和 下 载 


上 传 (Upload) 是 从 本 地 计算 机 (一 般 称 客户 端 ) 向 远程 服务 器 (一 般 称 服务 器 端 ) 传 送 数 据 的 
行为 和 过 程 。 下 载 (Download) 是 从 远程 服务 器 取 回 数据 到 本 地 计算 机 的 过 程 。 


1.3 网 页 的 HTML 构成 


在 一 个 HTML 文档 中 ， 必 须 包含 <HTML></HTML> 标 记 (也 称 标签 )， 并 且 该 标记 需 放 在 
-个 HTML 文档 的 开始 和 结束 位 置 。 即 每 个 文档 以 <HTML> 开 始 ， 以 </HTML> 结 束 。 

<HITML> 与 < HMTL> 之 间 通 常 包含 两 个 部 分 ， 分 别 是 <HEAD></HEAD> 标 记 和 
<BODY></BODY> 标 记 。HEAD 标记 包含 HIML 头 部 信息 ， 例 如 文档 标题 、 样 式 定义 等 。 
BODY 标记 包含 文档 主体 部 分 ， 即 网 页 内 容 。 需 要 注意 的 是 ，HTML 标记 不 区 分 大 小 写 。 

为 了 便于 读者 从 整体 把 握 HTML 文档 结构 ， 下 面 通过 一 个 HTML 页 面 来 介绍 HTML 页 
面 的 整体 结构 ， 示 例 代码 如 下 : 

<!IDOCTYPE HTML> 

<HTML> 


<HEAD> 
<TITLE> 网 页 标题 </TITLE> 

</HEAD> 

<BODY> 


网 页 内 容 


</BODY> 
</HTML> 


从 上 述 代 码 可 以 看 出 ， 一 个 基本 的 HIML 页 由 以 下 几 个 部 分 构成 。 

(1) <!DOCTYPE> 声 明 必须 位 于 HIMLS 文档 中 的 第 一 行 ， 也 就 是 位 于 <HTML> 标 记 之 
前 。 该 标记 用 于 告知 浏览 器 文档 所 使 用 的 HTML 规范 。<!DOCTYPE> 声 明 不 属于 HTML 标 
记 ; 它 是 一 条 指令 ， 告 诉 浏览 器 编写 页 面 所 用 的 标记 的 版 本 。 由 于 HTMLS5 版 本 还 没有 得 到 
浏览 器 的 完全 认可 ， 后 面 介绍 时 还 采用 以 前 通用 的 标准 。 

(2) <HTML> 和 </HTML> 说 明 本 页 面 是 使 用 HTML 语言 编写 的 ， 可 使 浏览 器 软件 能 够 准 
确 无 误 地 解释 、 显 示 。 

(3) <HEAD> 和 </HEAD> 是 HTML 的 头 部 标记 ， 头 部 信息 不 显示 在 网 页 中 。 在 该 标记 内 
可 以 嵌 套 其 他 标记 ， 用 于 说 明文 件 标题 和 整个 文件 的 一 些 公用 属性 ， 如 通过 <style> 标 记 定 义 
CSS 样式 表 ， 通 过 <ScripP> 标 记 定义 JavaScript 脚本 文件 。 

(4) <TITLE> 和 </TITLE> 标 记 是 HEAD 中 的 重要 组 成 部 分 ， 它 包含 的 内 容 显 示 在 浏览 器 
的 窗口 标题 栏 中 。 如 果 没 有 TITLE， 浏 览 器 标题 栏 就 只 显示 本 页 的 文件 名 。 

(5) <BODY> 和 </BODY> 标 记 用 来 包含 HTML 页 面 显示 在 浏览 器 窗口 的 客户 区 中 的 实际 
内 容 。 例 如 页 面 中 的 文字 、 图 像 、 动 画 、 超 链接 以 及 其 他 HTML 相关 的 内 容 都 是 在 该 标签 中 
定义 的 。 

1.3.1 文档 标记 

一 般 HTML 的 页 面 以 <HTML> 标 记 开 始 ， 以 </HTML> 标 记 结束 。HTML 文档 中 的 所 有 内 

容 都 应 位 于 这 两 个 标记 之 间 。 如 果 这 两 个 标记 之 间 没 有 内 容 ， 则 该 HTML 文档 在 IE 浏览 器 


中 的 显示 将 是 空白 的 。 
<HTML> 标 记 的 语法 格式 如 下 : 


</HTML> 


1.3.2” 头 部 标记 


头 部 标记 (<HEAD>.……</HEAD>) 包 含 的 是 文档 的 标题 信息 ， 如 标题 、 关 键 字 、 说 明 以 及 
样式 等 。 除 了 <TITLE> 标 题 外 ， 一 般 位 于 头 部 标记 中 的 内 容 不 会 直接 显示 在 浏览 器 中 ， 而 是 
通过 其 他 的 方式 显示 。 

(1) 内 容 。 

头 部 标记 中 可 以 嵌 套 多 个 标记 ， 如 <TITLE>、<BASE>、<ISINDEX> 和 <SCRIPT> 等 标 
记 ， 也 可 以 添加 任意 数量 的 属性 ， 如 <SCRIPT>、<STYLE>、<META> 或 <OBJECT> 等 。 除 了 
<TITLE> 标 记 外 ， 艇 入 的 其 他 标记 可 以 使 用 多 个 。 

(2) 位 置 。 

在 所 有 的 HTML 文档 中 ， 头 部 标记 不 可 或 缺 ， 但 是 其 起 始 和 结尾 标记 却 可 以 省 去 。 在 各 
个 HIML 的 版 本 文档 中 ， 头 部 标记 一 直 紧 跟 <BODY> 标 记 ， 但 在 框架 设置 文档 中 ， 其 后 跟 的 
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Dreamweaver 动态 网 站 开发 
案例 课堂 四 一 


是 <FRAMESET> 标 记 。 

(3) 属性 。 

<HEAD> 标 记 的 属性 PROFILE 给 出 了 元 数据 描写 的 位 置 ， 从 中 可 以 看 到 其 中 的 <META> 
和 <LIND> 元 素 的 特性 。 该 属性 的 形式 没有 严格 的 格式 规定 。 


1.3.3 ”主体 标记 


主体 标记 (<BODY>.…..</BODY>) 包 含 了 文档 的 内 容 ， 用 若干 个 属性 来 规定 文档 中 显示 
的 背景 和 颜色 。 

主体 标记 可 能 用 到 的 属性 如 下 : 

(1) BACKGROUND=URI( 文 档 的 背景 图 像 ，URL 指 图 像 文件 的 路 径 ); 

(2) BGCOLOR=Color( 文 档 的 背景 色 ); 

(3) TEXT=Color( 文 本 颜色 ); 

(4) LINK=Color( 链 接 颜色 ); 

(5) VLINK=Color( 已 访问 的 链接 颜色 ); 

(6) ALINK=Color( 被 选中 的 链接 颜色 ); 

(7) ONLOAD=Script( 文 档 已 被 加 载 ); 

(8) ONUNLOAD=Script( 文 档 已 推出 )。 

为 该 标签 添加 属性 的 代码 格式 如 下 : 


<BODY BACKGROUNE="URI"BGCOLOR="Color"> 


</BODY> 


1.4 HTML 的 常用 标记 


HTML 文档 是 由 标记 组 成 的 文档 ， 要 熟练 掌握 HTML 文档 的 编写 ， 就 要 先 了 解 HTML 的 
常用 标记 。 


1.4.1 标题 标记 <h1> 到 <h6> 


在 HTML 文档 中 ， 文 本 的 结构 除了 以 行 和 段 的 形式 出 现 之 外 ， 还 可 以 标题 的 形式 存在 。 
通常 一 篇 文档 最 基本 的 结构 ， 就 是 由 若干 不 同 级 别 的 标题 和 正文 组 成 的 。 

HTML 文档 中 包含 有 各 种 级 别 的 标题 ， 各 种 级 别 的 标题 由 元 素 <h1> 到 <h6> 来 定义 。<h1> 
至 <h6> 标 题 标记 中 的 h 是 英文 headline( 标 题 行 ) 的 首 字母 。 其 中 <h1> 代 表 1 级 标题 ， 级 别 最 
高 ， 字 号 也 最 大 ， 其 他 标题 元 素 依次 递减 ，<h6> 级 别 最 低 。 

下 面具 体 介 绍 一 下 标题 的 使 用 方法 。 

【 例 1.1】 标题 标记 的 使 用 (实例 文件 ，ch01\1.1.htmlD))。 具 体 代 码 如 下 : 


<html> 
<head> 


<title> 文 本 段 换行 </title> 


| 
口 
第 
</head> a 
<body> 章 
<h1> 这 里 是 1 级 标题 </h1> 
<h2> 这 里 是 2 级 标题 </h2> 出 
<h3> 这 里 是 3 级 标题 </h3> 设 
<h4> 这 里 是 4 级 标题 </h4> 计 
<h5> 这 里 是 5 级 标题 </h5> 与 | 
<h6> 这 里 是 6 级 标题 </h6> 列 
</body> 建 
</html> 区 
YW 
将 上 述 代码 输入 在 记事 本 当中 ， 并 以 后 缀 名 为 .html 的 格式 保存 后 ， 可 在 正 浏览 器 中 预 ” 知 


览 效 果 ， 效 果 如 图 1-14 所 示 。 


ED ev - ox | ar 区 
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这 里 是 1 级 标题 
这 里 是 2 级 标题 
这 里 是 3 级 标题 1 


”这 里 是 4 级 标题 
这 时 时 5 扣 村 
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1-14 ”标题 标记 的 使 用 效果 


1.4.2 段落 标记 <p> 


段落 标记 <p> 用 来 定义 网 页 中 的 一 段 文本 ， 文 本 在 一 个 段落 中 会 自动 换行 。 段 落 标记 是 双 
标记 ， 即 <p> 和 </p>， 在 开始 标记 <p> 和 结束 标记 </p> 之 间 的 内 容 形成 一 个 段落 。 如 果 省 略 掉 
结束 标记 ， 从 <p> 标 记 开始 ， 那 么 直到 在 下 一 个 段落 标记 出 现 之 前 的 文本 ， 都 将 被 默认 为 同一 
段 段落 内 。 段 落 标记 中 的 p 是 指 英文 单词 paragraph( 即 “段落 ”) 的 首 字母 。 

下 面具 体 介绍 一 下 段落 标记 的 使 用 方法 。 

【 例 1.2】 段落 标记 的 使 用 (实例 文件 ，ch01\1.2.html)。 具 体 代码 如 下 : 


<html> 

<head> 

<title> 段 落 标 记 的 使 用 </title> 

</head> 

<body> 

<p> 白 雪 公 主 与 七 个 小 矮人 !</p> 

<p> 很 久 以 前 ， 白 雪 公 主 的 后 母 一 王后 美貌 盖世 ， 但 魔 镜 却 告诉 她 世上 唯 有 白雪 公主 最 漂亮 。 王 后 怒 
火 中 烧 派 武 士 把 她 押送 到 森林 准备 谋害 ， 武 士 很 同情 白雪 公主 让 她 逃 往 森林 深 处 。 

</p> 

<p> 

小 动物 们 用 善良 的 心 抚慰 她 ， 鸟 兽 们 还 把 她 领 到 一 间 小 屋 中 ， 收 拾 完 房间 后 她 进入 了 梦乡 。 房 子 的 主人 
是 在 外 边 开 矿 的 七 个 小 矮人 ， 他 们 听 了 白雪 公主 的 诉说 后 把 她 留 在 家 中 。 

</p> 

<p> 
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王后 得 知 白雪 公主 未 死 ， 便 用 魔 镜 把 自己 变 成 一 个 老太婆 ， 来 到 密林 深 处 ， 哄 骗 白雪 公主 吃 下 一 只 有 毒 
的 苹果 ， 使 公主 昏 死 过 去 。 鸟 儿 识 破 了 王后 的 伪装 ， 飞 到 矿山 向 小 矮人 报告 了 白雪 公主 的 不 幸 。 七 个 小 
矮人 火速 赶 回 ， 王 后 仓皇 逃 跑 ， 在 狂风 暴雨 中 跌 下 山崖 摔 死 。 


</p> 


<p> 

七 个 小 矮人 悲痛 万 分 ， 把 白雪 公主 安放 在 一 只 水 晶 棺 里 日 日 夜 夜 守护 着 她 。 邻 国 的 王子 闻 讯 ， 骑 着 白马 
赶 来 ， 爱 情 之 吻 使 白雪 公主 死 而 复生 。 然 后 王子 带 着 白雪 公主 骑 上 白马 ， 告 别 了 七 个 小 矮人 和 森林 中 的 
动物 ， 到 王子 的 宫殿 中 开始 了 幸福 的 生活 。 

</p> 

</body> 

</html> 


将 上 述 代 码 输入 在 记事 本 当中 ， 并 以 后 缀 名 为 .html 的 格式 保存 ， 然 后 在 正 浏览 器 中 预 
览 效果 ， 如 图 1-15 所 示 ， 可 以 看 出 <P> 标 记 将 文本 分 成 了 4 个 段落 。 
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白雪 公主 与 七 个 小 萎 人 ! 


很 久 以 其 ， 白 要 公主 的 后 导 一 王后 关税 闹 世 ， 但 履 屏 元 告 诉 凶 世上 唯 有 白 吉 公 主 最 音 
王后 薛 火 中 司 派 直 士 把 好 押送 到 这 补 准 音 误 宕 ， 趟 士 同情 白 本 公主 让 而 进 往 奈 习 深 | 


作物 们 用 辣 良 的 必 托 型 地 ht 收 接 亮 房间 后 她 讲 入 了 过 
多 。 房 子 的 主 ， a 个 小 颖 人 ， 他 们 听 了 白白 雪 公 主 (10 张 ) 雪 公主 的 诉说 


玉 后 得 知 白雪 公主 未 死 ， 恒 用 昧 镜 把 自己 变 成 一 个 老 太 莹 ， 来 下 密林 深 趟 ， 张 驴 白 要 公 
主 吃 下 一 只 有 辫 的 汞 果 ， 使 公主 辕 死 这 去 。 乌 儿 识 破 了 王后 的 擅 荣 ， 和 
公主 的 不 宰 ， 七 个 小 括 人 火速 妊 回 ， 王 后 仓皇 所 中 ， 在 狂风 景 而 中 跌 下 山 岩 掉 死 


七 个 1 把 白 全 公主 安放 在 一 只 水 是 枪 蛙 日 日 认 夜 于 护 着 好、 争 国 的 王子 | 
网 讯 ， 忆 走 来 ， 爱 情 之 吻 全 白 罕 公主 死 而 复生 ， 然 后 王子 融 着 白 亚 公主 骑 上 白 
马 , 告别 了 A 和 刊本 中 的 动物 ， 到 王子 的 襄 藉 宁 开 始 了 幸福 的 生活 


页 100% 


图 1-15 ”段落 标记 的 使 用 效果 
1.4.3 换行 标记 <br> 


使 用 换行 标记 <br> 可 以 给 一 段 文字 换行 。 该 标记 是 一 个 单 标记 ， 它 没有 结束 标记 ， 是 英 
文 单词 break 的 缩写 ， 作 用 是 将 文字 在 一 个 段 内 强制 换行 。 一 个 <br> 标 记 代表 一 次 换行 ， 连 续 
的 多 个 标记 可 以 实现 多 次 换行 。 使 用 换行 标记 时 ， 在 需要 换行 的 位 置 添加 <br> 标 记 即 可 。 

下 面具 体 介 绍 一 下 换行 标记 的 使 用 方法 。 

【 例 1.3】 换行 标记 的 使 用 (实例 文件 ，ch01\1.3.html)。 县 体 代码 如 下 : 


<html> 

<head> 
<title> 文 本 段 换行 </title> 
</head> 

<body> 

清明 <br/> 

清明 时 节 雨 纷纷 <br/> 
路 上 行人 和 欲 断 魂 <br/> 
借 问 酒家 何 处 有 <br/> 
牧童 遥 指 可 花村 
</body> 

</html> 


将 上 述 代 码 输 入 在 记事 本 当中 ， 并 以 后 绥 名 为 .html 的 格式 


保存 ， 然 后 在 下 浏览 器 中 预览 效果 ， 如 图 1-16 所 示 。 [Oo Bre 
清明 上 
1.4.4 ”链接 标记 <a> Hs 
牧童 适 指 可 花村 
链接 标记 <a> 是 网 页 中 最 为 常用 的 标记 ， 主 要 用 于 把 页 面 中 CT 
的 文本 或 图 片 链接 到 其 他 的 页 面 、 文 本 或 图 片 。 建 立 链接 的 要 i 
图 1-16 换行 标记 的 使 用 效果 
素 有 两 个 ， 即 可 被 设置 为 链接 的 网 页 元 素 和 链接 指向 的 目标 地 
址 。 链 接 的 基本 结构 如 下 : 
<a href=URL> 网 页 元 素 </a> 
下 面具 体 介绍 链接 标记 的 使 用 方法 


1. 设置 文本 和 图 片 的 链接 
可 被 设置 为 链接 的 网 页 元 素 是 指 网 页 中 通常 使 用 的 文本 和 图 片 。 文 本 链接 和 图 片 链接 通 


过 <a> 和 </a> 标 记 来 实现 ， 即 将 文本 或 图 片 放 在 <a> 开 始 标记 和 </a> 结 束 标记 之 间 即 可 建立 文 
本 和 图 片 链接 。 


【 例 1.4】 设置 文本 和 图 片 的 链接 (实例 文件 ，chO1\1.4.html)。 打 开 记 事 本 文件 ， 在 其 中 


输入 以 下 HTML 代码 : 


<html> 

<head> 

<title> 文 本 和 图 片 链接 </title> 

</head> 

<body> 

<a href="a.html"><img src="images/Logo .gif"></a> 
<a href="b.html"> 公 司 简介 </a> 

</body> 

</html> 


代码 输入 完成 后 ， 将 其 保存 为 “链接 .html” 的 文件 ， 然 后 双击 该 文件 ， 就 可 以 在 正 浏览 


器 中 查看 到 使 用 链接 标签 设置 文本 和 图 片 的 效果 了 ， 如 图 1-17 所 示 。 


2. 设置 电子 邮件 路 径 


电子 邮件 路 径 ， 即 用 来 链接 一 个 电子 邮件 的 地 址 。 其 写法 如 下 : 
mailto :邮件 地 址 


【 例 1.5】 设置 电子 邮件 路 径 ( 实 例文 件 ，ch01\1.5.html)。 打 开 记 事 本 文件 ， 在 其 中 输入 


以 下 HTML 代码 : 


<html> 

<head> 

<title> 电 子 邮件 路 径 </title> 

</head> 

<body> 

使 用 电子 邮件 路 径 : <a href="mailto:1iule2012@163.com"> 链 接 </a> 


全 


省 闫 小 租 二 到 由 半 洲 河 避 _ 韦 上 小 虹 


IGG 


全 
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</body> 

</html> 

代码 输入 完成 后 ， 将 其 保存 为 “电子 邮件 链接 .html” 文 件 ， 然 后 双击 该 文件 ， 就 可 以 在 
下 浏览 器 中 查看 到 使 用 链接 标签 设置 电子 邮件 路 径 的 效果 了 。 当 单 击 含有 链接 的 文本 时 ， 会 
弹出 一 个 发 送 邮件 的 对 话 框 ， 显 示 效 果 如 图 1-18 所 示 。 
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图 1-17 文本 与 图 片 链接 效果 图 1-18 ”电子 邮件 链接 路 径 效果 


1.4.5 ”列表 标记 <ul> 


文字 列表 可 以 有 序 地 编排 一 些 信息 资源 ， 使 其 结构 化 和 条 理化 ， 并 以 列表 的 样式 显示 出 
来 ， 以 便 浏览 者 能 更 加 快 快捷 地 获得 相应 信息 。HTML 中 的 文字 列表 如 同文 字 编辑 软件 word 
中 的 项 目 符号 和 自动 编号 。 


1. 建立 无 序列 表 


无 序列 表 相当 于 word 中 的 项 目 符号 ， 无 序列 表 的 项 目 排列 没有 顺序 ， 只 以 符号 作为 分 项 
标识 。 无 序列 表 的 建立 使 用 的 是 一 对 标记 <ul> 和 </ul>， 其 中 每 一 个 列表 项 使 用 的 建立 还 要 一 
对 标记 <li> 和 </li>。 其 结构 如 下 : 

<ul> 

<1i> 无 序列 表 项 </1i> 
<1i> 无 序列 表 项 </1i> 
<1i> 无 序列 表 项 </1i> 
<1i> 无 序列 表 项 </1i> 

</ul> 

在 无 序列 表 结 构 中 ， 使 用 <ul> 和 </ul> 标 记 表 示 该 无 序列 表 的 开始 和 结束 ，<1i> 则 表示 该 
列表 项 的 开始 。 在 一 个 无 序列 表 中 可 以 包含 多 个 列表 项 ， 并 且 <li> 的 结束 标记 可 以 省 略 。 

下 面 实例 介绍 了 使 用 无 序列 表 实现 文本 的 排列 显示 。 

【 例 1.6】 建立 无 序列 表 ( 实 例文 件 : ch01\1.6.html)。 打 开 记 事 本 文件 ， 在 其 中 输入 以 下 
HTML 代码 : 

<html> 


<head> 


<title> 嵌 套 无 序列 表 的 使 用 </title> 


a] 


</head> 
<body> 
<h1> 网 站 建设 流程 </h1> 
<ul> 
<1i> 项 目 需 求 </1i> 
<1i> 系统 分 析 
<ul> 
<1i> 网 站 的 定位 </1i> 
<1i> 内 容 收集 </1i> 
<1i> 栏 目 规划 </1i> 
<1i> 网 站 目录 结构 设计 </1i> 
<1i> 网 站 标志 设计 </1i> 
<1i> 网 站 风格 设计 </1i> 
<1i> 网 站 导航 系统 设计 </1i> 


</ul> 


</1i> 
<1i> 伪 网 页 草图 
<ul> 
<1i> 制 作 网 页 草图 </1i> 
<1i> 将 草图 转换 为 网 页 </1i> 
</ul> 
</1i> 
<1i> 站 点 建设 </1i> 
<1i> 网 页 布局 </1i> 
<1i> 网 站 测试 </1i> 
<1i> 站 点 的 发 布 与 站 点 管理 </1i> 
</ul> 
</body> 
</html> 


代码 输入 完成 后 ， 将 其 保存 为 “无 序列 表 .html” 文 件 ， 然 后 双击 该 文件 ， 就 可 以 在 正 浏 
览 器 中 查看 到 使 用 列表 标记 建立 无 序列 表 的 效果 了 ， 如 图 1-19 所 示 。 
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图 1-19 ”建立 的 无 序列 表 


通过 观察 发 现 ， 无 序列 表 项 中 ， 可 以 嵌 套 一 个 列表 。 如 代码 中 的 “系统 分 析 ” 列 表 项 和 
“ 伪 网 页 草图 ”列表 项 中 都 有 下 级 列表 ， 因 此 在 这 对 <i> 和 </li> 标 记 间 又 增加 了 一 对 <ul> 和 
</ul> 标 记 。 


2. 建立 有 序列 表 
有 序列 表 类 似 于 Word 中 的 自动 编号 功能 。 有 序列 表 的 使 用 方法 和 无 序列 表 的 使 用 方法 


15@ 
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基本 相同 。 它 使 用 的 标记 是 <ol> 和 </ol>， 每 个 列表 项 前 使 用 的 标记 是 <li> 和 </li>， 且 每 个 项 目 
都 有 前 后 顺序 之 分 ， 多 数 情况 下 ， 该 顺序 使 用 数字 表示 。 其 结构 如 下 : 


<ol> 
<1i> 第 1 项 </1i> 
<1i> 第 2 项 </1i> 
<1i> 第 3 项 </1i> 
</ol> 


下 面 实例 介绍 了 使 用 有 序列 表 实 现 文本 的 排列 显示 。 
【 例 1.7】 建立 有 序列 表 ( 实 例文 件 ，ch01\1.7.html)。 打 开 记 事 本 文件 ， 在 其 中 输入 以 下 
HTML 代码 : 


<html> 

<head> 
<title> 有 序列 表 的 使 用 </title> 
</head> 

<body> 

<h1> 本 讲 目标 </h1> 


<olL> 
<1i> 网 页 的 相关 概念 </1i> 
<1i> 网 页 与 HTML</1i> 
<1i>Web 标准 (结构 、 表 现 、 行 为 ) </1i> 
<1i> 网 页 设计 与 开发 的 过 程 </1i> 
<1i> 与 设计 相关 的 技术 因素 </1i> 
<1i>HTML 简介 </1i> 

</ol> 

</body> 

</html> 


代码 输入 完成 后 ， 将 其 保存 为 “有 序列 表 .html” 文 件 ， 然 后 双击 该 文件 ， 就 可 以 在 正 浏 
览 器 中 查看 到 使 用 列表 标记 建立 有 序列 表 后 的 效果 了 ， 如 图 1-20 所 示 。 
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图 1-20 ”建立 的 有 序列 表 
1.4.6 图像 标 记 <img> 
图 像 可 以 美化 网 页 ， 插 入 图 像 时 可 使 用 图 像 标记 <img>。<img> 标 记 的 属性 及 描述 如 表 1-1 


型 


第 
所 示 。 前 
表 1-1 <img> 标 记 的 属性 网 
页 
属 性 值 描 述 说 
alt text 定义 有 关 图 形 的 短 的 描述 记 
STC URL 要 显示 的 图 像 的 URL 站 
height pixels % 定义 图 像 的 高 度 
于 URL 把 图 像 定义 为 服务 器 端的 图 像 映射 2 
定义 作为 客户 端 图 像 映 射 的 一 幅 图 像 。 请 参阅 <map> 和 <area> 标签 ， 了 
Usemap URL 解 其 工作 原理 
Vspace pixels 定义 图 像 顶 部 和 底部 的 空白 。 不 支持 。 请 使 用 CSS 代替 
width pixels % 设置 图 像 的 宽度 NN 
二 NN 
src 属性 用 于 指定 图 片 源 文 件 的 路 径 ， 它 是 <img> 标 记 必 不 可 少 的 属性 。 其 语法 格式 如 下 : 


<img src=" 图 片 路 径 "> 

图 片 的 路 径 既 可 以 是 绝对 路 径 ， 也 可 以 是 相对 路 径 。 

【 例 1.8】 在 网 页 中 插入 图 片 (实例 文件 :ch0l\1.8.htmD。 打 开 记事 本 文件 ， 在 其 中 输入 
以 下 HTML 代码 : 

<html> 

<head> 

<title> 插 入 图 片 </title> 

</head> 

<body> 

<img src="images/meishi.jpg"> 

</body> 

</html> 


代码 输入 完成 ， 将 其 保存 为 “插入 图 片 .html” 文 件 ， 然 后 双击 该 文件 ， 就 可 以 在 正 浏览 
器 中 查看 到 使 用 <img> 标 记 插入 图 片 后 的 效果 了 ， 如 图 1-21 所 示 。 
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图 1-21 插入 图 片 的 显示 效果 
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2. 从 不 同位 置 插入 图 片 


在 插入 图 片 时 ， 用 户 可 以 将 其 他 文件 夹 或 服务 器 中 的 图 片 显示 到 网 页 中 。 
【 例 1.9】 从 不 同位 置 插入 图 片 (实例 文件 ，ch01\1.9.html)。 打 开 记 事 本 文件 ， 在 其 中 输 
入 以 下 HTML 代码 : 


<html> 
<body> 


<p> 

来 自 一 个 文件 夹 的 图 像 : 

<img src="images/meishi.jpg" /> 
</p> 


<p> 

来 自 baidu 的 图 像 : 

<img 

src="http://www.baidu.com/img/shouye b5486898c692066bd2cbaeda86d74448.gif" 
> 

</p> 

</body> 

</html> 


代码 输入 完成 后 ， 将 其 保存 为 “插入 其 他 位 置 图 片 .html” 文 件 ， 然 后 双击 该 文件 ， 就 可 
以 在 正 浏览 器 中 查 到 使 用 <img> 标 签 插入 图 像 后 的 效果 了 ， 如 图 1-22 所 示 。 


二 党 
寻 八 本 


FE 


BX 
Bai 人 百度 


来 自 beidu 的 国 像 ， 


图 1-22 从 不 同位 置 插入 的 图 像 
3. 设置 图 片 的 宽度 和 高 度 


在 HTML 文档 中 ， 还 可 以 任意 设置 插入 图 片 的 显示 大 小 。 设 置 图 片 尺寸 可 通过 图 片 的 属 
性 width( 宽 度 ) 和 height( 高 度 ) 来 实现 。 

【 例 1.10】 设置 图 片 在 网 页 中 的 宽度 和 高 度 (实例 文件 ，ch01\1.10.htmD)。 打 开 记 事 本 文 
件 ， 在 其 中 输入 如 下 HTML 代码 : 


<html> 
<head> 
<title> 插 入 图 片 </title> 


a 


</head> 

<body> 

<img src="images/01.jpg"> 

<img src="images/01.jpg" width="200"> 

<img src="images/01.jpg" width="200" height="300"> 
</body> 

</html> 


代码 输入 完成 后 ， 将 其 保存 为 “设置 图 片 大 小 .html” 文 件 ， 然 后 双击 该 文件 ， 就 可 以 在 
正 浏览 器 中 查看 到 使 用 <img> 标 签 设置 的 图 片 的 宽度 和 高 度 效果 了 ， 如 图 1-23 所 示 。 
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1-23 图片 高 度 与 宽度 的 设置 效果 


由 图 1-23 可 以 看 到 ， 图 片 的 显示 尺寸 是 由 width 和 height 控制 的 。 当 只 为 图 片 设置 一 个 
尺寸 属性 时 ， 另 外 一 个 尺寸 就 以 图 片 原始 的 长 宽 比 例 来 显示 。 图 片 的 尺寸 单位 可 以 选择 百 分 
比 或 数值 。 百 分 比 为 相对 尺寸 ， 数 值 是 绝对 尺寸 。 


二 网 页 中 插入 的 图 像 都 是 位 图 ， 当 放大 图 片 的 尺寸 时 ， 图 片 就 会 出 现 马赛 克 ， 变 
首相 得 很 模 村 
rm 在 Windows 中 查看 图 片 的 尺寸 ， 只 需 找 到 图 像 文件 ， 把 鼠标 指针 移动 到 图 像 
眉 。 上 ， 停留 几 秒 后 ， 就 会 出 现 一 个 提示 框 ， 显 示 出 该 图 片 文件 的 尺寸 。 尺 寸 后 显示 
的 数字 ， 代 表 的 是 图 片 的 宽度 和 高 度 ， 如 256 x 256。 


1.4.7 表格 标记 <table> 


HTML 中 的 表格 标记 有 以 下 几 个 。 

@ <table>...……..</table> 标 记 : <table> 标 记 用 于 标识 一 个 表格 对 象 的 开始 ;</table> 标记 
标识 一 个 表格 对 象 的 结束 。 一 个 表格 中 ， 只 人 允许 出 现 一 对 <table> 和 </table> 标 记 。 

@ <tr>.……….</tr> 标 记 : </tr> 用 于 标识 表格 一 行 的 开始 ;</tr> 标 记 用 于 标识 表格 一 行 的 
结束 。 表 格 内 有 多 少 对 <tr> 和 </tr> 标 记 ， 就 表示 表格 中 有 多 少 行 。 

e <td>..…...</td> 标 记 : <td> 标 记 用 于 标识 表格 某 行 中 的 一 个 单元 格 开始 ;</td> 标 记 用 
于 标识 表格 某 行 中 的 一 个 单元 格 结束 。<td> 和 </td> 标 记 书 写 在 <t> 和 </t> 标 记 内 。 
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一 对 <tr> 和 </tr> 标 记 内 有 多 少 对 <tdt> 和 </td> 标 记 ， 就 表示 该 行 有 多 少 个 单元 格 。 
最 基本 的 表格 ， 必 须 包含 一 对 <table> 和 </table> 标 记 、 一 对 或 几 对 <t> 和 </t> 标 记 以 及 一 
对 或 几 对 <td> 和 </td> 标 记 。 一 对 <table> 和 </table> 标 记 定 义 一 个 表格 ， 一 对 <t> 和 </t> 标 记 定 
义 一 行 ， 一 对 <td> 和 </td> 标 记 定 义 一 个 单元 格 。 
【 例 1.11】 定义 一 个 4 行 3 列 的 表格 (实例 文件 ，ch01\1.11.htmD)。 打 开 记 事 本 文件 ， 在 
其 中 输入 以 下 HTML 代码 。 


<html> 
<head> 
<title> 表 格 基本 结构 </title> 
</head> 
<body> 
<table border="1"> 
<tr> 
<td>R1</td> 
<td>B1</td> 
<td>C1</td> 
</tr> 
<tr> 
<td>A2</td> 
<td>B2</td> 
<td>C2</td> 
</tr> 
<tr> 
<td>R3</td> 
<td>B3</td> 
<td>C3</td> 
</tr> 
<tr> 
<td>R4</td> 
<td>B4</td> 
<td>C4</td> 
</tr> 
</table> 
</body> 
</html> 


代码 输入 完成 后 ， 将 其 保存 为 “表格 .html” 文 件 ， 然 后 双击 该 文件 ， 就 可 以 在 下 浏览 器 
中 查看 到 使 用 表格 标记 插入 表格 后 的 效果 了 ， 如 图 1-24 所 示 。 
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1-24 ”表格 标记 的 使 用 


1.4.8 框架 标记 <frame> 


框架 是 网 页 中 最 常用 的 页 面 设 计 方 式 ， 很 多 网 站 都 使 用 了 框架 技术 。 框 架 通常 用 来 定义 
页 面 的 导航 区 域 和 内 容 区 域 ， 最 常见 的 框架 使 用 模式 是 一 个 框架 显示 包含 导航 栏 的 文档 ， 而 
另 一 个 框架 显示 含有 内 容 的 文档 。 

框架 页 面 中 最 基本 的 内 容 就 是 框架 集 文件 ， 它 是 整个 框架 页 面 的 导航 文件 ， 其 基本 语法 如 下 。 


<html> 
<head> 
<title> 框 架 页 面 的 标题 </title> 
</head> 
<frameset> 

<frame> 

<frame> 


</frameset> 
</html> 


从 上 面 的 语法 结构 中 可 以 看 出 ， 在 使 用 框架 的 页 面 中 ，<body> 主 体 标记 被 框架 标记 
<frameset> 所 代替 。 而 对 于 框架 页 面 中 包含 的 每 一 个 框架 ， 都 是 通过 <frame> 标 记 来 定义 的 。 


@ 不 能 将 <body> 和 </body> 标 记 与 <frameset> 和 </frameset> 标 记 同 时 使 用 ! 不 
站 。 过 ， 假 如 你 要 添加 包含 一 段 文 未 的 <nofiames> 标 记 ， 那 么 你 就 必须 将 这 段 文字 
点 套 在 <body> 和 </body> 标 记 之 间 。 


混合 分 割 窗 口 就 是 在 一 个 页 面 中 ， 既 有 水 平分 割 的 框架 ， 又 有 垂直 分 割 的 框架 。 语 法 结 
构 如 下 : 


<frameset rows=" 框 架 窗口 的 高 度 , 框架 窗口 的 高 度 , . . . . . . “> 
<frame> 
<frameset cols=" 框 架 窗口 的 宽度 , 框架 窗口 的 宽度 , . . . . . . ba 
<frame> 
<frame> 


</frameset> 
<frame> 


</frameset> 
当然 ， 也 可 以 先进 行 垂直 分 割 ， 再 进行 水 平分 割 。 其 语法 如 下 : 
<frameset cols=" 框 架 窗口 的 宽度 , 框架 窗口 的 宽度 , . . . . . - 二 


<frame> 

<frameset rows=" 框 架 窗口 的 高 度 , 框架 窗口 的 高 度 , . . . . . - So 
<frame> 

<frame> 

</frameset> 

<frame> 


</frameset> 
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i 注 在 设置 框架 窗口 时 ， 一 定 要 注意 窗口 大 小 的 设置 与 窗口 个 数 的 统一 。 
意 
【 例 1.12】 将 一 个 页 面 分 割 成 不 同 的 框架 (实例 文件 : chol1.12.htmD。 打 开 记事 本 文 
件 ， 在 其 中 输入 以 下 HTML 代码 
<html> 
<head> 
<title> 泥 合 分 割 窗 口 </title> 
</head> 
<frameset rows="30%,70%"> 
<frame> 
<frameset cols="20%,55%,25%"> 
<frame> 
<frame> 
<frame> 
</frameset> 
</frameset> 
</html> 


由 上 述 代码 可 以 看 出 ， 首 先 页 面 被 水 平分 割 成 上 下 两 个 窗口 ， 接 着 下 面 的 框架 又 被 垂直 


分 割 成 3 个 窗口 。 因 此 下 面 的 框架 标记 <frame> 便 被 框架 集 标记 所 代替 。 运 行程 序 ， 其 效果 如 
图 1-25 所 示 。 


1-25 ”框架 标记 的 使 用 效果 


1.4.9 表单 标记 <form> 


表单 主要 用 于 收集 网 页 上 浏览 者 的 相关 信息 。 其 标记 为 <form> 和 </form>。 表 单 的 基本 语 


法 格式 如 下 : 


<form action="url" method="get|post" enctype="mime"> 
</form > 


其 中 ，action=url 用 于 指定 处 理 提交 表单 的 格式 ， 它 可 以 是 一 个 URL 地 址 或 一 个 电子 邮 


件 地 址 。method=get 或 post 用 于 指明 提交 表单 的 HTTP 方法 。enctype=cdata 用 于 指明 把 表单 
提交 给 服务 器 时 的 互联 网 媒体 形式 。 表 单 是 一 个 能 够 包含 表单 元 素 的 区 域 。 通 过 添加 不 同 的 
表单 元 素 ， 将 显示 不 同 的 效果 。 


下 面 介绍 一 下 如 何 使 用 表单 标记 开发 一 个 简单 网 站 的 用 户 意见 反馈 页 面 。 


【 例 1.13】 开发 用 户 意见 反馈 页 面 (实例 文件 : ch0l\1.13.htmD。 打 开 记 事 本 文件 ， 在 其 
中 输入 以 下 HTML 代码 : 


<html> 

<head> 

<title> 用 户 意见 页 面 </title> 

</head> 

<body> 

<hl align=center> 用 户 意 见 页 面 </h1> 

<form method="post" > 

<p> 姓 gnbsp; gnbsp; sgnbsp; gnbsp; 名: 

<input type="text" class=txt size="12" maxlength="20" name="username" /> 
</p><p> 性 gnbsp; gnbsp; gnbsp; gnbsp; 别 : 
<input type="radio" value="male" /> 男 
<input type="radio" value="female" /> 女 
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</p><p> 年 gnbsp; gnbsp; gnbsp; gnbsp; 龄 : 

<input type="text" class=txt name="age" /> 
</p> 

<p> 联 系 电话 : 

<input type="text" class=txt name="tel" /> 
</p><p> 电 子 邮 件 : 

<input type="text" class=txt name="email" /> 
</p><p> 联 系 地 址 : 

<input type="text" class=txt name="address" /> 
</p> 

<p> 

请 输入 您 对 网 站 的 建议 <br> 

<textarea name="yourworks" cols ="50" rows = "5"></textarea> 
<br> 


<input type="submit" name="submit" value=" 提 交 "/> 
<input type="reset" name="reset"” value=" 清 除 ” /> 
</p> 

</form> 

</body> 

</html> 


代码 输入 完成 后 ， 将 其 保存 为 “表单 .hml” 文 件 ， 然 后 双击 该 文件 ， 就 可 以 在 下 浏览 器 
中 查看 到 使 用 表单 标记 插入 表单 后 的 效果 了 ， 如 图 1-26 所 示 ， 可 以 看 到 创建 的 用 户 反 馈 表 
单 ， 包 含 一 个 标题 “用 户 意见 页 面 ”， 还 包括 “姓名 ”“ 性 别 ”“ 年 龄 ”“ 联 系 电话 ”“ 电 
子 邮件 ”“ 联 系 地 址 ”等 内 容 。 
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1-26 表单 标记 的 使 用 效果 
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1.4.10 ”注释 标记 <!> 


注释 是 在 HTML 代码 中 插入 的 描述 性 文本 ， 用 来 解释 该 代码 或 提示 其 他 信息 。 注 释 只 出 
现在 代码 中 ， 浏 览 器 对 注释 代码 不 进行 解释 ， 并 且 在 浏览 器 的 页 面 中 不 显示 。 在 HTML 源 代 
码 中 适当 地 插入 注释 语句 是 一 种 非常 好 的 习惯 。 对 于 设计 者 日 后 的 代码 修改 、 维 护 工 作 很 有 
好 处 。 另 外 ， 如 果 将 代码 交 给 其 他 设计 者 ， 其 他 人 也 能 很 快 读 懂 前 者 所 撰写 的 内 容 。 

注释 标记 的 语法 如 下 : 

<!-- 注 释 的 内 容 --> 

注释 语句 元 素 由 前 后 两 个 部 分 组 成 ， 前 一 部 分 由 一 个 左 尖 括 号 、 一 个 半角 感叹 号 和 两 个 
连 字 符 组 成 ， 后 一 部 分 由 两 个 连 字符 和 一 个 右 尖 括 号 组 成 。 


<html> 

<head> 
<title> 标 记 测试 </title> 
</head> 


<!-- 这 里 是 标题 --> 

<h1> 网 站 建设 精 讲 </h1> 

</body> 

</html> 

页 面 注释 不 但 可 以 对 HTML 中 一 行 或 多 行 代码 进行 解释 说 明 ， 而 且 可 能 注释 掉 这 些 代 
码 。 如 果 希 望 某 些 HTML 代码 在 浏览 器 中 不 显示 ， 则 可 将 这 部 分 内 容 放 在 <!-- 和 --> 之 间 。 例 
如 上 述 代码 ， 可 修改 如 下 : 


<html> 

<head> 
<title> 标 记 测试 </title> 
</head> 

<body> 


2 
<h1> 网 站 建设 精 讲 </h1> 
—=> 


</body> 
</html> 


修改 后 的 代码 ， 将 <h1l> 标 记 处 理 成 了 注释 内 容 ， 在 浏览 器 中 这 部 分 内 容 将 不 会 被 显示 。 
1.4.11 移动 标记 <marquee> 
使 用 marquee 标记 可 以 将 文字 设置 成 动态 滚动 的 效果 。 其 语法 结构 如 下 : 


<marquee> 滚 动 文字 </maraquee> 


Sn 想 设置 滚动 文字 只 需 在 标记 之 间 添 加 要 进行 滚动 的 文字 即 可 ， 而 且 还 可 以 在 
外 。 标记 之 间 设置 这 些 文字 的 字体 、 左 色 等 属性 。 
【 例 1.14】 制作 一 个 滚动 的 文字 (实例 文件 ，ch01\1.14.html)。 打 开 记 事 本 文件 ， 在 其 中 
输入 以 下 HTML 代码 : 


<html> 
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<head> 

<title> 设 置 滚动 文字 </title> 

</head> 

<body> 

<marquee> 

<font face=" 素 书 "” color="#CC0000 " size=4> 你 好 ， 欢 迎 光临 五 月 蔷薇 女 裤 专 卖 店 ! 这 里 有 
最 适合 你 的 打 底 裤 ， 这 里 有 最 让 你 满意 的 服务 </font> 

</marquee> 

</body> 

</html> 


代码 输入 完成 后 ， 将 其 保存 为 “滚动 文字 .html” 文 件 ， 然 后 双击 该 文件 ， 就 可 以 在 下 浏 
览 器 中 查 到 使 用 移动 标记 设置 的 滚动 文字 的 效果 了 ， 如 图 1-27 所 示 。 从 中 可 以 看 到 设置 为 红 
色 隶 书 的 文字 从 浏览 器 的 右 方 缓 缓 向 左 滚动 。 
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1-27 设置 的 网 页 文字 的 滚动 效果 
1.5 ”实战 演练 一 一 制作 日 程 表 


通过 在 记事 本 中 输入 HTML 语言 ， 可 以 制作 出 多 种 多 样 的 页 面 效 果 。 本 节 将 以 制作 日 程 
表 为 例 ， 介 绍 HTML 语言 的 综合 应 用 方法 。 其 具体 的 操作 步骤 如 下 。 
ES 打开 记事 本 ， 在 其 中 输入 以 下 代码 : 


<html> 
<head> 


<META http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title> 制 作 日 程 表 </title> 


</head> 


<body> 
</body> 
</html> 


输入 代码 后 的 记事 本 页 面 ， 如 图 1-28 所 示 。 
ED 在 <head> 标 记 之 前 输入 以 下 代码 : 


<style type="text/css"> 
body { 

background-color: #FFD9D9; 
text-align: center; 

. 

</style> 


输入 代码 后 的 记事 本 页 面 ， 如 图 1-29 所 示 。 
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1-28 ”输入 代码 后 的 记事 本 页 面 1-29 ”输入 代码 后 的 记事 本 页 面 
革 BY 在 </style> 之 前 输入 以 下 代码 : 
-ziti { 


font-family: "方正 粗 活 意 简体 "， "方正 大 黑 简体 "; 
font-size: 36px; 


1 
输入 代码 后 的 记事 本 页 面 ， 如 图 1-30 所 示 。 


head) 
到 到 明 ="Content-Typs” content="tezt/html, charset=gb2312” /7 
4xixle? 关 | title 

otyle tyPe= tegt/csc > 

lbody 


SS 


font-fanily; “方正 相 窒 蓝 阐 体 "，“ 方 正大 黑 简体 ”， 
font-size: 36pz 


1-30 ”输入 代码 后 的 记事 本 页 面 
在 <body> 和 </body> 标 签 之 间 输 入 以 下 代码 : 


<span class="ziti"> 一 周 日 程 表 </span> 


输入 代码 后 的 记事 本 页 面 ， 如 图 1-31 所 示 。 


《title? 乔 | 作 日 得 表 </title> 
«style type= tezt/css 


-ziti { 
”font-fenily; “方正 相 活 意向 体 。“ 方 正大 黑 简 休 ”。 
font -sizc: S36px. 


1-31 输入 代码 后 的 记事 本 页 面 


EDD 在 ~,body> 标 签 之 前 输入 以 下 代码 : 


<table width="470"”border="1”align="center”cellpadding="2" 


cellspacing="3"> 
<tr> 
<td width="84" 
<td width="84" 
<td width="86" 
<td width="83" 
<td width="83" 


style="text-align: 
style="text-align: 
style="text-align: 
style="text-align: 
style="text-align: 


center">gnbsp;</td> 
center"> 工 作 一 </td> 
center"> 工 作 二 </td> 
center"> 工 作 三 </td> 
center"> 工 作 四 </td> 


</tr> 
<tr> 
<td 
<td 
<td 
<td 
<td 
</tr> 
<tr> 
<td 
<td 
<td 
<td 
<td 
</tr> 
<tr> 
<td 
<td 
<td 
<td 
<td 
ER 
<tr> 
<td 
<td 
<td 
<td 
<td 
</tr> 
<tr> 
<td 
<td 
<td 
<td 
<td 
</tr> 


style="text-align: 
style="text-align: 
style="text-align: 
style="text-align: 
style="text-align: 


style="text-align: 
style="text-align: 
style="text-align: 
style="text-align: 
style="text-align: 


style="text-align: 
style="text-align: 
style="text-align: 
style="text-align: 
style="text-align: 


style="text-align: 
style="text-align: 
style="text-align: 
style="text-align: 
style="text-align: 


style="text-align: 
style="text-align: 
style="text-align: 
style="text-align: 
style="text-align: 


</table> 


输入 代码 后 的 记事 本 页 面 ， 如 图 1-32 所 示 。 


EEDD 在 记事 本 中 选择 【文件 】 一 【保存 】 菜 单 命令 ， 弹 出 【另存 为 】 对 话 框 ， 在 
【保存 在 】 下 拉 列 表 框 中 设置 保存 文件 的 位 置 ， 在 【文件 名 】 下 拉 列 表 框 中 输入 


center; font-family: 
center">gnbsp;</td> 
center">gnbsp;</td> 
center">gnbsp;</td> 
center">gnbsp;</td> 


center; font-family: 
center">gnbsp;</td> 
center">gnbsp;</td> 
center">gnbsp;</td> 
center">gnbsp;</td> 


center; font-family: 
center">gnbsp;</td> 
center">gnbsp;</td> 
center">gnbsp;</td> 
center">gnbsp;</td> 


center; font-family: 
center">gnbsp;</td> 
center">gnbsp;</td> 
center">gnbsp;</td> 
center">gnbsp;</td> 


center; font-family: 
center">gnbsp;</td> 
center">gnbsp;</td> 
center">gnbsp;</td> 
center">gnbsp;</td> 


' 宋 体 ';"> 星 期 一 </td> 


' 宋 体 ';"> 星 期 二 </td> 


' 宋 体 ';"> 星 期 三 </td> 


' 朱 体 ';"> 星 期 四 </ta> 


' 宋 体 ';"> 星 期 五 </td> 


“制作 日 程 表 .html”， 然 后 单 击 【 保 存 】 按 钮 ， 如 图 1-33 所 示 。 
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《td 是 科 he 86 sty] et ter “> 工作 二 5/td> 
《19 卫 遇 stylert center 工作 二 </td> 
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<td style="text-align; center， font-fanily;' 宋 体 ';”) 星 朋 一 <ftd> 
td Style=7text-align: center’ynbsp, </td> 

td st center Ynbsp, /td> 

《td style=’text-align: center nbsp: C/td> 

Ce sles tert-aligr: center enka /td 

ty 


1-32 ”输入 代码 后 的 记事 本 页 面 1-33 【另存 为 】 对 话 框 


双击 打开 保存 的 index.html 文件 ， 即 可 看 到 制作 的 日 程 表 ， 如 图 1-34 所 示 。 

如 果 需 要 在 日 程 表 中 添加 工作 内 容 ， 可 以 用 记事 本 打开 index.html 文件 ， 在 代码 
段 <td style="text-align: center">&nbsp;</td> 的 &nbsp 之 前 输入 内 容 即 可 。 比 如 要 输入 
星期 一 完成 的 第 1 件 工作 内 容 “ 完 成 校对 ”， 可 在 如 图 1-35 所 示 的 位 置 输入 。 
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图 1-34 ”查看 制作 的 日 程 表 图 1-35 输入 内 容 后 的 记事 本 页 面 
EGRB 保存 后 打开 文档 ， 即 可 在 浏览 器 中 看 到 添加 的 工作 内 容 ， 如 图 1-36 所 示 。 
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1-36 ”查看 制作 的 日 程 表 
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1.6” 跟 我 练 练 手 


1.6.1 练习 目标 
能 够 熟练 掌握 本 章节 所 讲 内 容 。 


1.6.2 上 机 练习 


练习 1: HTML 常用 标记 的 使 用 。 
练习 2: 制作 日 程 表 。 


17 高 手 甜点 


甜点 1: HTML5 中 的 单 标记 和 双 标 记 的 书写 方法 。 


HITML5 中 的 标记 分 为 单 标记 和 双 标 记 。 所 谓 单 标记 是 指 没有 结束 标记 的 标签 ， 双 标记 是 
指 既 有 开始 标签 又 包含 结束 标签 。 

对 于 单 标记 是 不 允许 写 结束 标记 的 元 素 ， 只 允许 以 < 元 素 /> 的 形式 进行 书写 和 使 用 。 例 如 
<br> 和 </br> 的 书写 方式 是 错误 的 ， 正 确 的 书写 方式 为 <br />。 当 然 ， 在 HTML5 之 前 的 版 本 
中 ，<br> 这 种 书写 方法 可 以 被 沿用 。HTML5 中 不 允许 写 结束 标记 的 元 素 有 area、base、br、 
col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr。 

对 于 部 分 双 标 记 可 以 省 略 结束 标记 。HTML5 中 允许 省 略 结束 标记 的 元 素 有 li、dt、dd、 
p、 rt、 rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th。 

HTML5 中 有 些 元 素 还 可 以 完全 被 省 略 。 即 使 这 些 标记 被 省 略 了 ， 该 元 素 还 是 以 隐 式 的 方 
式 存在 的 。HTMLS5 中 人 允许 省 略 全 部 标记 的 元 素 有 html、head、body、colgroup 、tbody。 


甜点 2: 使 用 记事 本 编辑 HTML 文件 时 应 注意 的 事项 。 


很 多 初学 者 在 保存 文件 时 ， 没 有 将 HTML 文件 的 扩展 名 .html 或 .htm 作为 文件 的 后 级 ， 导 
致 文件 还 是 以 .txt 为 扩展 名 ， 因 此 ， 无 法 在 浏览 器 中 查看 。 如 果 读 者 是 通过 单 击 右键 创建 的 记 
事 本 文件 ， 那 么 在 给 文件 重 命名 时 ， 一 定 要 以 html 或 .htm 作为 文件 的 后 级 。 特 别 要 注意 的 
是 ， 当 Windows 系统 的 扩展 名 是 隐 式 的 时 ， 更 容易 出 现 这 样 的 错误 。 为 避免 这 种 情况 的 发 
生 ， 读 者 可 以 在 【文件 夹 选 项 】 对 话 框 中 查看 扩展 名 是 否 是 显示 的 。 
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& 人 钱 2 ， 
整体 把 握 网 站 


一 个 网 站 能 否 成 功 ， 很 大 程度 上 取决 于 网 页 的 结构 与 配色 。 因 此 ， 在 学 习 制 作 
动态 网 站 之 前 ， 首 先 需要 掌握 网 站 结构 与 网 页 配色 的 相关 基础 知识 。 本 章 介绍 的 内 
容 包 括 网 页 配色 的 相关 技巧 、 网 站 结构 的 布局 ， 以 及 网 站 配色 的 经 典 案 例 等 。 


Td 
Re 
人 
NN NN NN De 


Dreamweaver 动态 网 站 开发 
案例 课堂 ~… 


2.1 善 用 色彩 设计 网 页 


经 研究 发 现 ， 当 用 户 第 一 次 打开 某 个 网 站 时 ， 给 用 户 留 下 第 一 印象 的 既 不 是 网 站 的 内 
容 ， 也 不 是 网 站 的 版 面 布局 ， 而 是 网 站 具有 冲击 力 的 色彩 ， 如 图 2-1 所 示 。 


图 2-1 网 页 色彩 搭配 


色彩 的 魅力 是 无 限 的 ， 它 可 以 让 本 身 很 平淡 无 味 的 东西 瞬间 变 得 漂亮 起 来 。 作 为 最 具 说 
服 力 的 视觉 语言 ， 作 为 最 强烈 的 视觉 冲击 ， 色 彩 在 人 们 的 生活 中 起 着 先 声 夺 人 的 作用 。 因 
此 ， 作 为 一 名 优秀 的 网 页 设计 师 ， 不 仅 要 掌握 基本 的 网 站 制作 技术 ， 还 要 掌握 网 站 的 配色 风 
格 等 设计 艺术 。 


2.1.1 认识 色彩 


为 了 能 更 好 地 应 用 色彩 来 设计 网 页 ， 需 要 先 了 解 色彩 的 一 些 基本 概念 。 自 然 界 中 有 好 多 
种 色彩 ， 比 如 玫瑰 是 红色 的 ， 大 海 是 蓝 色 的 ， 橘 子 是 橙色 的 …… 但 是 最 基本 的 色彩 有 三 种 
( 红 ， 绿 ， 蓝 )， 其 他 的 色彩 都 可 以 由 这 三 种 色彩 调和 而 成 。 这 三 种 色彩 被 称 为 “三 原 
色 ”， 如 图 2-2(a) 所 示 。 

现实 生活 中 的 色彩 可 以 分 为 彩色 和 非 彩色 。 其 中 黑白 灰 属于 非 彩色 系列 ;其 他 的 色彩 都 
属于 彩色 系列 。 任 何 一 种 彩色 的 色彩 都 具备 色相 、 明 度 和 纯度 三 个 特征 。 而 非 彩色 的 色彩 只 
具有 明度 属性 。 


1. 色相 


色相 指 的 是 色彩 的 名 称 。 这 是 色彩 最 基本 的 特征 ， 是 一 种 色彩 区 别 于 另 一 种 色彩 最 主要 
的 因素 ， 比 如 紫色 、 绿 色 、 黄 色 等 都 代表 了 不 同 的 色相 。 同 一 色相 的 色彩 ， 通 过 调整 亮度 或 
者 纯度 ， 就 很 容易 搭配 ， 如 图 2-2(b) 所 示 。 


2. 明度 


明度 也 叫 亮度 ， 是 指 色 彩 的 明暗 程度 。 明 度 越 大 ， 色 彩 越 亮 ， 比 如 一 些 购物 、 儿 童 类 网 
站 ， 用 的 是 一 些 鲜亮 的 颜色 ， 让 人 感觉 绚丽 多 姿 、 生 气 勃 勃 。 明 度 越 低 ， 颜 色 越 暗 。 低 明度 
的 色彩 主要 用 于 一 些 充 满 神秘 感 的 游戏 类 网 站 ， 以 及 一 些 为 了 体现 个 人 的 孤僻 ， 或 者 忧郁 等 
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性 格 的 个 人 网 站 。 
有 明度 差 的 色彩 更 容易 调和 ， 比 如 紫色 (#993399) 与 黄色 (FFF00)， 瞳 红 (#cc3300) 与 草绿 
(#99cc00)， 上 暗 蓝 (#0066cc) 与 梅 色 (#ff9933) 等 ， 如 图 2-3 所 示 。 
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图 2-3 色彩 的 明度 


3. 纯度 
纯度 指 色 彩 的 鲜艳 程度 。 纯 度 高 的 色彩 颜色 鲜亮 ， 纯 度 低 的 色彩 颜色 暗淡 发 灰 。 


2.1.2 ”网 页 上 的 色彩 处 理 


色彩 是 人 的 视觉 最 敏感 的 东西 ， 网 页 的 色彩 如 果 处 理 得 好 ， 可 为 网 页 锦上添花 ， 达 到 事 
半 功 倍 的 效果 。 


1. 色彩 的 感觉 


人 们 对 不 同 的 色彩 有 不 同 的 感觉 ， 具 体 如 下 。 

ee 色彩 的 冷暖 感 : 红 、 橙 、 黄 代表 太阳 、 火 焰 ， 蓝 、 青 、 紫 代表 大 海 、 晴 空 ， 绿 、 紫 
代表 不 冷 不 暖 的 中 性 色 ， 非 彩色 系列 中 的 黑 代 表 冷 ， 白 代表 暖 。 

e ”色彩 的 软 硬 感 : 高 明度 、 高 纯度 的 色彩 给 人 以 软 的 感觉 ， 反之， 则 感觉 硬 ， 如 图 2-4 
所 示 。 

e 色彩 的 强 弱 感 : 亮度 高 的 ， 明 亮 、 鲜 艳 的 色彩 感觉 强 ， 反 之 ， 则 感觉 弱 。 

@ ”色彩 的 兴奋 与 沉静 : 红 、 橙 、 黄 ， 偏 暖色 系 ， 高 明度 ， 高 纯度 ， 对 比 强 的 色彩 感觉 
兴奋 ; 青 、 蓝 、 紫 ， 偏 冷色 系 ， 低 明度 ， 低 纯度 ， 对 比 弱 的 色彩 感觉 沉静 ， 如 图 2-5 
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图 2-4 色彩 的 软 硬 感 图 2-5 色彩 的 兴奋 与 沉静 
e@ 色彩 的 华丽 与 朴素 ; 红 、 黄 等 暖色 和 鲜艳 而 明亮 的 色彩 搭配 给 人 以 华丽 感 ， 青 、 蓝 
等 冷色 和 浑浊 而 灰暗 的 色彩 搭配 给 人 以 朴素 感 。 

e@ 色彩 的 进退 感 : 对 比 强 、 上 暖色、 明快 、 高 纯度 的 色彩 代表 前 进 ， 反 之 ， 代 表 后 退 。 

以 上 对 色彩 的 这 种 认识 十 多 年 前 就 已 被 国外 众多 企业 所 接受 ， 并 由 此 产生 了 色彩 营销 战 
略 。 许 多 企业 以 此 作为 市 场 竞 争 的 有 利 手段 和 再 现 企业 形象 特征 的 方式 ， 通 过 设计 色彩 抓 住 
商机 ， 比 如 绿色 的 “鳄鱼 ”、 红 色 的 “可 口 可 乐 ”、 红 黄色 的 “麦当劳 ”， 以 及 黄色 的 “ 柯 
达 ” 等 ， 如 图 2-6 所 示 。 


寺 “全 起 的 .| 全 色 


加 入 中 国 节拍 


图 2-6 经 典 色彩 搭配 的 网 页 
在 欧美 和 日 本 等 发 达 国家 ， 设 计 色彩 早 就 成 为 一 种 新 的 市 场 竞争 力 ， 并 被 广泛 使 用 。 


2. 色彩 的 季节 性 

春季 处 处 一 片 生 机 ， 通 常会 流行 一 些 活 泼 跳跃 的 色彩 ; 夏季 气候 炎热 ， 人 们 希望 凉 更 ， 
通常 会 流行 以 白色 和 浅 色调 为 主 的 清爽 亮丽 的 色彩 ;秋季 秋高气爽 ， 流 行 的 是 沉重 的 暖色 
调 ; 冬季 气候 寒冷 ， 深 颜色 有 吸光 、 传 热 的 作用 ， 人 们 希望 能 暖和 一 点 ， 喜 爱 穿 深 色 衣服 。 
这 就 很 明显 地 形成 了 四 季 的 色彩 流行 趋势 : 春 夏 以 浅 色 、 明 艳 色调 为 主 ， 秋 冬 以 深 色 、 稳 重 
色调 为 主 。 每 年 色彩 的 流行 趋势 ， 都 会 因此 而 分 成 春 夏 和 秋冬 两 大 色彩 趋向 ， 如 图 2-7 所 示 。 


2-7 色彩 的 季节 性 


3. 颜色 的 心理 感觉 


不 同 的 颜色 会 给 浏览 者 带 来 不 同 的 心理 感受 。 

@ ”红色 : 红色 是 一 种 激 奋 的 色彩 ， 代 表 热 情 、 活 泼 、 温 暖 、 幸 福 和 吉祥 。 红 色 容 易 引 
起 人 们 注意 ， 也 容易 使 人 兴奋 、 激 动 、 热 情 、 紧 张 和 冲 动 ， 而 且 还 是 一 种 容易 给 人 
造成 视觉 疲劳 的 颜色 。 

e 绿色: 绿色 代表 新 鲜 、 充 满 希 望 、 和 平 、 柔 和 、 安 逸 和 青春 ， 显 得 和 睦 、 宁 静 、 健 
康 。 绿 色 具 有 黄色 和 蓝 色 两 种 成 分 颜色 。 在 绿色 中 ， 将 黄色 的 扩张 感 和 蓝 色 的 收缩 
感 进行 了 中 和 ， 并 将 黄色 的 温暖 感 与 蓝 色 的 寒冷 感 相 抵消 。 绿 色 和 人 金黄、 淡白 拱 
配 ， 可 产生 优雅 、 每 适 的 气氛 ， 如 图 2-8(a) 所 示 。 
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图 2-8 色彩 的 心理 感觉 


e@ 蓝 色 : 蓝 色 代 表 深 远 、 永 恒 、 沉 静 、 理 智 、 诚 实 、 公 正 、 权 威 ， 是 最 具 凉 严 、 清 新 
特点 的 色彩 。 蓝 色 和 白色 混合 ， 能 体现 柔顺 、 淡 雅 、 浪 漫 的 气氛 (比如 天 空 的 色彩 )。 

@ 黄色 : 黄色 具有 快乐 、 希 望 、 智 慧 和 轻快 的 个 性 ， 它 的 明度 最 高 ， 代 表明 朗 、 恰 
快 、 高 贵 ， 是 色彩 中 最 为 娇气 的 一 种 色 。 只 要 在 纯 黄色 中 混入 少量 的 其 他 色彩 ， 其 
色相 感 和 色 性 格 均 会 发 生 较 大 程度 的 变化 ， 如 图 2-8(b) 所 示 。 

@ 紫色: 紫色 代表 优雅 、 高 贵 、 魅 力 、 自 傲 和 神秘 。 在 紫色 中 加 入 白色 ， 可 使 其 变 得 
优雅 、 娇 气 ， 并 充满 女性 的 魅力 。 

e@ 橙色: 橙色 也 是 一 种 激 奋 的 色彩 ， 具 有 轻快 、 欢 欣 、 热 烈 、 温 馨 、 时 尚 的 效果 ， 如 
图 2-9(a) 所 示 。 
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图 2-9 色彩 的 心理 感觉 
e ”白色 : 白色 代表 纯洁 、 纯 真 、 朴 素 、 神 圣 和 明快 ， 给 人 的 洁白 、 明 快 、 纯 真 、 清 洁 
的 感觉 。 如 果 在 白色 中 加 入 其 他 颜色 ， 则 会 影响 其 纯洁 性 ， 使 其 性 格 变 得 含蓄 。 
ee 黑色 : 黑色 给 人 以 深沉 、 神 秘 、 彼 静 、 翡 哀 、 压 抑 的 感觉 ， 如 图 2-9(b) 所 示 。 
@ ”灰色 : 在 商业 设计 中 ， 灰 色 给 人 以 骤 和、 平凡、 温和、 谦让、 高 雅 的 感觉 ， 具 有 永 
远 流 行 性 。 在 许多 的 高 科技 产品 中 ， 尤 其 是 和 金属 材料 有 关 的 ， 几 乎 都 采用 灰色 来 
传达 高 级 、 科 技 的 形象 。 使 用 灰色 时 ， 大 多 需要 利用 其 不 同 的 参差 变化 和 其 他 色彩 
相配 ， 才 不 会 给 和 人 过 于 平淡 、 沉 间 、 呆 板 和 伪 硬 的 感觉 。 
每 种 色彩 在 饱和 度 、 亮 度 上 略微 变化 ， 就 会 给 人 产生 不 同 的 感觉 。 以 绿色 为 例 ， 黄 绿色 
有 青春 、 旺 盛 的 视觉 意境 ， 而 蓝 绿色 则 显得 幽 宁 、 深 沉 。 其 中 白色 与 灰色 在 色彩 搭配 中 使 用 
最 为 广泛 ， 也 常 称 为 万 能 搭配 色 。 在 没有 更 好 的 对 比 色 选择 时 ， 使 用 白色 或 者 灰色 作为 辅助 
色 ， 效 果 一 般 都 不 会 差 ， 如 图 2-10 所 示 。 
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图 2-10 色彩 的 心理 感觉 
2.2 ”网 页 色彩 的 搭配 
从 上 面 可 以 看 出 ， 色 彩 对 人 的 视觉 效果 非常 明显 。 一 个 网 站 设计 的 成 功 与 否 ， 在 某 种 程 


度 上 取决 于 设计 者 对 色彩 的 运用 和 搭配 ， 因 为 网 页 设计 属于 一 种 平面 效果 设计 。 在 平面 图 
上 ， 色 彩 的 冲击 力 是 最 强 的 ， 它 最 容易 给 客户 留 下 深刻 的 印象 。 如 图 2-11 所 示 为 利用 色彩 搭 
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图 2-11 儿童 网 站 网 页 色彩 的 搭配 

2.2.1 确定 网 站 的 主题 色 

-个 网 站 一 般 不 使 用 单一 颜色 ， 因 为 会 让 人 感觉 单调 、 乏 味 ; 但 也 不 能 将 所 有 的 颜色 都 
运用 到 网 站 中 ， 让 人 感觉 不 庄重 。 一 个 网 站 必须 围绕 一 种 或 两 种 主题 色 进 行 设计 ， 这 样 既 不 
至 于 让 客户 迷失 方向 ， 也 不 至 于 让 客户 感到 单调 、 乏 味 。 所 以 确定 网 站 的 主题 色 是 设计 者 必 
须 考虑 的 问题 之 一 。 

1. 主题 色 确定 的 两 个 方面 

在 确定 网 站 主题 色 时 ， 通 常 可 以 从 以 下 两 个 方面 去 考虑 。 

(1) 结合 产品 、 内 容 特 点 。 

根据 产品 的 特点 来 确定 网 站 的 主 色调 ， 如 果 企业 产品 是 环保 型 的 ， 可 以 采用 绿色 ， 企 业 
主 营 的 产品 是 高 科技 或 电子 类 的 可 以 采用 蓝 色 等 ， 如 果 是 红酒 企业 ， 则 可 以 考虑 使 用 红酒 的 


色调 ， 如 图 2-12 所 示 。 


GZ 


图 2-12 商业 网 站 色彩 的 搭配 
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(2) 根据 企业 的 VI 识别 系统 。 

如 今 有 很 多 公司 都 有 自己 的 VI 识别 系统 ， 从 公司 的 名 片 、 办 公 室 的 装修 、 手 提 袋 等 可 以 
看 得 到 ， 这 些 都 是 公司 沉淀 下 来 的 企业 文化 。 网 站 作为 企业 的 宣传 方式 之 一 ， 也 在 一 定 程度 
上 需要 考虑 这 些 因 素 。 


2. 主题 色 的 设计 原则 


在 主题 色 确定 时 我 们 还 要 考虑 如 下 原则 ， 这 样 设计 出 的 网 站 界面 才能 别出心裁 ， 体 现 出 
企业 的 独特 风格 ， 更 有 利于 向 受众 传递 企业 信息 。 


SN (1) 与 众 不 同 ， 富 有 个 性 。 
过 去 许多 网 站 都 喜欢 选择 与 竞争 对 手 的 网 站 相近 的 颜色 ， 试 图 通过 这 样 的 策略 来 快速 实 
现 网 站 构建 ， 减 少 建站 成 本 ， 但 这 种 建站 方式 鲜 有 成 功 者 。 网 站 的 主题 色 一 定 要 与 竞争 网 站 
能 明显 地 区 别 开 ， 只 有 与 众 不 同 、 别 具 一 格 才 是 成 功 之 道 ， 这 是 网 站 主题 色 选择 的 首要 原 
则 。 如 今 越 来 越 多 的 网 站 规划 者 开始 认识 到 这 个 真理 ， 比 如 中 国联 通 已 经 改变 过 去 模仿 中 国 
移动 的 色彩 ， 推 出 了 与 中 国 移动 区 别 明显 的 红 黑 搭配 组 合作 为 新 的 标准 色 ， 如 图 2-13 所 示 。 
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图 2-13 ”以 红 黑 搭配 组 合 为 标准 色 的 中 国联 通 网 页 


(2) 符合 大 众 审美 习惯 。 

由 于 大 众 的 色彩 偏好 非常 复杂 ， 而 且 是 多 变 的 ， 甚 至 是 瞬息 万 变 的 ， 因 此 要 选择 最 能 
合 大 众 偏好 的 色彩 是 非常 困难 ， 甚 至 是 不 可 能 的 。 最 好 的 办 法 是 剔除 掉 大 众 所 禁 忌 的 颜色 。 
比如 ， 巴 西 人 忌讳 棕 黄 色 和 紫色 ， 他 们 认为 棕 黄 色 使 人 绝望 ， 紫 色 会 带 来 悲哀 ， 紫 色 和 黄色 
配 在 一 起 ， 则 是 患 病 的 预兆 。 所 以 在 选择 网 站 主题 色 时 要 考虑 你 的 用 户 群 体 的 审美 习惯 。 


2.2.2 ”网 页 色彩 搭配 原理 


色彩 搭配 既是 一 项 技术 性 工作 ， 也 是 一 项 艺术 性 很 强 的 工作 。 因 此 ， 在 设计 网 页 时 ， 除 
了 要 考虑 网 站 本 身 的 特点 外 ， 还 要 遵循 一 定 的 艺术 规律 ， 从 而 设计 出 色彩 鲜明 、 人 性格 独特 的 


网 站 。 

网 页 的 色彩 是 树立 网 站 形象 的 关键 要 素 之 一 ， 色 彩 搭配 是 令 网 页 设计 初学 者 感到 头疼 的 
问题 。 网 页 的 背景 、 文 字 、 图 标 、 边 框 、 链 接 等 应 该 采用 什么 样 的 色彩 ， 应 该 措 配 什么 样 的 
色彩 才能 最 好 地 表达 出 网 站 的 内 涵 和 主题 呢 ? 下 面 就 来 详细 介绍 一 下 。 

1. 色彩 的 鲜明 性 

网 页 的 色彩 要 鲜明 ， 这 样 容易 引 人 注 目 。 一 个 网 站 的 用 色 必 须要 有 自己 独特 的 风格 ， 这 
样 才能 显得 个 性 鲜明 ， 给 浏览 者 留 下 深刻 的 印象 。 

2. 色彩 的 独特 性 

网 站 要 有 与 众 不 同 的 色彩 ， 使 得 大 家 对 网 站 的 印象 强烈 。 一 般 可 通过 使 用 网 页 颜色 选择 
器 选择 一 个 专 色 ， 然 后 根据 需要 进行 微调 ， 如 图 2-14 所 示 。 

3. 色彩 的 艺术 性 

网 站 设计 也 是 一 种 艺术 活动 ， 因 此 必须 遵循 艺术 规律 。 在 考虑 到 网 站 本 身 特 点 的 同时 ， 
按照 内 容 决定 形式 的 原则 ， 大 胆 进行 艺术 创新 ， 设 计 出 既 符 合 网 站 要 求 ， 又 有 一 定 艺术 特色 
的 网 站 。 

不 同 的 色彩 会 产生 不 同 的 联想 : 蓝 色 使 人 联想 到 天 空 、 黑 色 使 人 联想 到 黑夜 、 红 色 使 人 
联想 到 喜事 等 ， 选 择 色 彩 要 和 网 页 的 内 涵 相 关联 ， 如 图 2-15 所 示 。 
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图 2-14 网 页 颜色 选择 工具 图 2-15 色彩 的 艺术 性 示例 


4. 色彩 搭配 的 合理 性 


一 个 色彩 搭配 合理 的 页 面 ， 尽 量 不 要 超过 四 种 颜色 ， 用 太 多 的 色彩 会 让 人 感到 网 站 没有 
方向 ， 没 有 侧重 点 。 当 主题 色 确 定好 以 后 ， 考 虑 其 他 配色 时 ， 一 定 要 考虑 其 他 配色 与 主题 色 
以 及 要 体现 的 效果 之 间 的 关系 。 另 外 哪 种 因素 占 主要 地 位 ， 是 明度 、 纯 度 还 是 色相 都 需要 设 
计 者 去 考虑 。 网 站 设计 者 可 以 考虑 从 以 下 两 个 方面 去 着 手 设计 ， 可 以 最 大 程度 减少 设计 成 本 。 

(1) 选择 单一 色 系 : 在 主题 色 确定 好 之 后 ， 可 以 选择 与 主题 色相 邻 的 颜色 进行 设计 ， 如 
图 2-16 所 示 。 

(2) 选择 主题 色 的 对 比 色 : 在 设计 时 ， 一 般 以 一 种 颜色 为 主 色调 ， 对 比 色 作为 点 级 ， 从 
而 可 产生 强烈 的 视觉 效果 ， 使 网 站 特色 鲜明 、 重 点 突出 。 


“DreanWeaver 动态 网 站 开发 


案例 课堂 > 


DEMO CAMP: WHAT ARE YOU WORXKING ON? 


图 2-16 单一 色彩 的 网 页 
2.2.3 网 页 中 色彩 的 搭配 


色彩 在 人 们 的 生活 中 带 有 丰富 的 感情 和 含义 ， 在 特定 的 场合 下 ， 同 种 色彩 可 以 代表 不 同 
的 含义 。 色 彩 总 的 应 用 原则 应 该 是 “总 体 协调 ， 局 部 对 比 ”， 即 主页 的 整体 色彩 效果 是 和 谐 
的 ， 局 部 、 小 范围 的 地 方 可 以 配 一 些 对 比 强烈 的 色彩 。 在 色彩 的 运用 上 ， 可 根据 主页 内 容 的 
需要 ， 分 别 采用 不 同 的 主 色调 。 

色彩 具有 象征 性 ， 比 如 煌 绿色 、 滩 绿色 、 金 黄色 、 灰 褐色 分 别 象 征 春 、 夏 、 秋 、 冬 。 其 
次 还 有 职业 的 标志 色 ， 比 如 军 警 的 橄榄 绿 、 医 疗 卫 生 的 白色 等 。 色 彩 还 具有 明显 的 心理 感 
觉 ， 比 如 冷 、 暧 的 感觉 ， 进 、 退 的 效果 等 。 另 外 ， 色 彩 还 具有 民族 性 。 各 个 民族 由 于 环境 、 
文化 、 传 统 等 因素 的 影响 ， 对 于 色彩 的 喜好 也 存在 着 较 大 的 差异 。 


1. 色彩 的 搭配 


充分 运用 以 下 色彩 的 这 些 特性 ， 可 以 使 网 站 的 主页 具有 深刻 的 艺术 内 涵 ， 从 而 提升 主页 
的 文化 品位 。 

e ”相近 色 : 色 环 中 相 邻 的 3 种 颜色 。 相 近 色 的 搭配 给 人 的 视觉 效果 很 舒适 、 很 自然 ， 
所 以 相近 色 在 网 站 设计 中 极为 常用 。 

”互补 色 : 色 环 中 相对 的 两 种 色彩 。 对 互补 色调 整 一 下 补 色 的 亮度 ， 有 时 是 一 种 很 好 
的 搭配 。 

®。 ”暖色 : 暖色 与 黑色 搭配 ， 一 般 应 用 于 购物 类 网 站 、 电 子 商 务 网 站 、 儿 童 类 网 站 等 ， 
用 以 体现 商品 的 琳琅 满目 ， 或 网 站 的 活 泌 、 温 声 等 效果 ， 如 图 2-17 所 示 。 

@ ”冷色 : 冷色 一 般 与 白色 搭配 ， 一 般 应 用 于 一 些 高 科技 、 游 戏 类 网 站 ， 主 要 表达 严 
肃 、 稳 重 等 效果 。 绿 色 、 蓝 色 、 蓝 紫色 等 都 属于 冷色 系列 ， 如 图 2-18 所 示 。 
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图 2-17 暖色 色 系 的 网 页 图 2-18 冷色 色 系 的 网 页 


。 ”色彩 均衡 : 网 站 让 人 看 上 去 舒适 、 协 调 ， 除 了 文字 、 图 片 等 内 容 的 排版 合理 外 ， 色 


彩 均衡 也 是 相当 重要 的 一 个 部 分 。 比 如 一 个 网 站 不 可 能 单一 地 运用 一 种 颜色 ， 所 以 
色彩 的 均衡 问题 是 设计 者 必须 要 考虑 的 问题 。 


2. 非 彩 色 的 搭配 


黑色 与 白色 措 配 是 最 基本 和 最 简单 的 搭配 ， 无 论 是 白字 黑 底 还 是 黑 底 白字 都 非常 清晰 明 
了 。 灰 色 是 万 能 色 ， 可 以 和 任何 色彩 搭配 ， 也 可 以 帮助 两 种 对 立 的 色彩 和 谐 过 渡 。 如 果 在 网 
页 设计 中 实在 找 不 出 合适 的 搭配 色彩 ， 那 么 可 以 尝试 用 灰色 ， 效 果 绝 对 不 会 太 差 ， 如 图 2-19 所 示 。 
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图 2-19 黑白 色 性 的 网 页 
2.2.4 ”网 页 元 素 的 色彩 搭配 


为 了 让 网 页 设计 得 更 亮丽 、 更 舒适 ， 增 强 页 面 的 可 阅读 性 ， 必 须 合 理 、 恰 当地 运用 页 面 
各 元 素 间 的 色彩 搭配 。 


1. 网 页 导航 条 
网 页 导航 条 是 网 站 的 指 路 方向 标 ， 浏 览 者 在 网 页 间 的 跳 转 、 了 解 网 站 的 结构 、 查 看 网 站 
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的 内 容 ， 都 必须 使 用 导航 条 。 导 航 条 的 色彩 措 配 ， 可 以 使 用 稍微 具有 跳跃 性 的 色彩 吸引 浏览 
者 的 视线 ， 使 其 感觉 网 站 清晰 明了 、 层 次 分 明 ， 如 图 2-20 所 示 。 


EE re PET 
BR eng ASE RE Prats EX Wap 


图 2-20 ”网 页 导航 条 的 色彩 搭配 
2. 网 页 链接 
一 个 网 站 不 可 能 只 有 一 页 ， 所 以 文字 与 图 片 的 链接 是 网 站 中 不 可 缺少 的 部 分 。 尤 其 是 文 
字 链 接 ， 因 为 文字 链接 有 别 于 一 般 文 字 ， 所 以 文字 链接 的 颜色 不 能 与 文字 的 颜色 一 样 。 要 让 


浏览 者 快速 地 找到 网 站 链接 ， 设 置 独特 的 文字 链接 颜色 是 一 种 驱使 浏览 者 点 击 链接 的 好 办 
法 ， 如 图 2-21 所 示 。 
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图 2-21 网 页 链接 的 色彩 搭配 
3. 网 页 文字 


如 果 网 站 中 使 用 了 背景 颜色 ， 就 必须 考虑 背景 颜色 的 用 色 与 前 景 文字 的 色彩 搭配 问题 。 
一 般 的 网 站 侧重 的 是 文字 ， 所 以 背景 的 颜色 可 以 使 用 纯度 或 者 明度 较 低 的 色彩 ， 文 字 的 颜色 
可 以 使 用 用 较为 突出 的 亮色 ， 让 人 一 目 了 然 。 
4. 网 站 标志 
网 站 标志 是 宣传 网 站 最 重要 的 部 分 之 一 ， 所 以 网 站 标志 在 页 面 上 一 定 要 突出 、 醒 目 ， 可 
以 将 Logo 和 Banner 做 得 鲜亮 一 些 。 也 就 是 说 ， 在 色彩 搭配 方面 网 站 标志 的 色彩 要 与 网 页 的 
主题 色彩 分 离开 。 有 时 为 了 更 突出 ， 也 可 以 使 用 与 主题 色相 反 的 颜色 ， 如 图 2-22 所 示 。 
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2-22 ”网 站 标志 的 色彩 搭配 


2.2.5 网 页 色彩 搭配 的 技巧 


色彩 搭配 是 一 门 艺术 ， 灵 活 地 运用 它 能 让 网 站 的 主页 更 具 亲 和 力 。 要 想 制 作出 漂亮 的 主 
页 ， 在 灵活 运用 色彩 的 基础 上 还 需要 加 上 自己 的 创意 和 技巧 。 下 面 将 详细 介绍 网 页 色彩 搭配 
的 一 些 常 用 技巧 。 


1. 单 色 的 使 用 


尽管 网 站 设计 要 避免 采用 单一 的 色彩 ， 以 免 产 生 单调 的 感觉 ， 但 通过 调整 单一 色彩 的 饱 
和 度 与 透明 度 ， 也 可 以 使 用 网 站 色彩 产生 变化 ， 使 网 站 避免 单调 ， 做 到 色彩 统一 ， 有 层次 
感 ， 如 图 2-23 所 示 。 


2. 邻近 色 的 使 用 
所 谓 邻近 色 ， 就 是 色 带 上 相 邻 近 的 颜色 ， 比 如 绿色 和 蓝 色 、 红 色 和 黄色 就 互 为 邻近 色 。 


采用 邻近 色 设 计 网 页 可 以 使 网 页 避免 色彩 杂乱 ， 易 于 使 页 面色 彩 丰 达到 富 、 和 谐 统 一 ， 如 
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图 2-24 所 示 。 


2-23 ” 单 色 的 使 用 示例 2-24 ”邻近 色 的 使 用 示例 
3. 对 比 色 的 使 用 


对 比 色 可 以 突出 重点 ， 产 生 强 烈 的 视觉 效果 。 通 过 合理 使 用 对 比 色 ， 能 够 使 网 站 特色 鲜 
明 、 重 点 突出 。 在 设计 时 ， 一 般 以 一 种 颜色 为 主 色 调 ， 将 对 比 色 作为 点 级 ， 可 以 对 设计 起 到 
画龙点睛 的 作用 。 


4. 黑色 的 使 用 


黑色 是 一 种 特殊 的 颜色 ， 如 果 使 用 恰当 、 设 计 合理 ， 往 往 能 产生 很 强 的 艺术 效果 。 黑 色 
一 般 用 来 作为 背景 色 ， 与 其 他 纯度 色彩 搭配 使 用 。 


5. 背景 色 的 使 用 


背景 颜色 不 要 太 深 ， 和 否则 会 显得 过 于 厚重 ， 而 且 还 会 影响 整个 页 面 的 显示 效果 。 在 设计 
时 ， 一 般 采 用 素 淡 清雅 的 色彩 ， 避 免 采 用 花纹 复杂 的 图 片 和 纯度 很 高 的 色彩 作为 背景 色 ， 同 
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时 ， 背 景色 要 与 文字 的 色彩 对 比 强 烈 一 些 。 但 也 有 例外 ， 使 用 黑色 的 背景 衬托 亮丽 的 文本 和 
图 像 ， 则 会 给 人 一 种 另类 的 感觉 ， 如 图 2-25 所 示 。 


6. 色彩 的 数量 


一 般 初学 者 在 设计 网 页 时 往往 会 使 用 多 种 颜色 ， 使 网 页 变 得 很 “ 花 ”， 缺 乏 统一 和 协 
调 ， 缺 乏 内 在 的 美感 ， 给 人 一 种 繁杂 的 感觉 。 事 实 上 ， 网 站 用 色 并 不 是 越 多 越 好 ， 一 般 应 控 
制 在 4 种 色彩 以 内 ， 可 以 通过 调整 色彩 的 各 种 属性 来 使 网 页 产生 颜色 上 的 变化 ， 从 而 保持 整 


er 


个 网 页 的 色调 统一 。 
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图 2-25 背景 色 的 使 用 示例 
7. 要 和 网 站 内 容 匹 配 


了 解 网 站 所 要 传达 的 信息 和 品牌 ， 选 择 可 以 加 强 这 些 信息 的 颜色 ， 比 如 在 设计 一 个 强调 
稳健 的 金融 机 构 时 ， 就 要 选择 冷色 系 、 和 柔和 的 蓝 、 灰 或 绿色 。 如 果 使 用 暖色 系 或 活泼 的 颜 
色 ， 可 能 会 破坏 了 该 网 站 的 品牌 。 


8. 围绕 网 页 主题 


色彩 要 能 烘托 出 主题 。 根 据 主题 确定 网 站 颜色 ， 同 时 还 要 考虑 网 站 的 访问 对 象 ， 文 化 的 
差异 也 会 使 色彩 产生 非 预期 的 反应 。 还 有 ， 不 同 地 区 与 不 同年 龄 层 对 颜色 的 反应 也 会 有 所 不 
同 。 年 轻 人 一 般 比 较 喜 欢 饱和 色 ， 但 这 样 的 颜色 引 不 起 高 龄 人 群 的 兴趣 。 

此 外 ， 白 色 是 网 站 用 得 最 普遍 的 一 种 颜色 。 很 多 网 站 甚至 留 出 大 块 的 白色 空间 ， 作 为 网 
站 的 一 个 组 成 部 分 ， 这 就 是 留 白 艺 术 。 很 多 设计 性 网 站 较 多 地 运用 留 白 艺术 ， 给 人 一 个 遐想 
的 空间 ， 让 人 感觉 心情 舒适 、 畅 快 。 恰 当 的 留 白 对 于 协调 页 面 的 均衡 会 起 到 相当 大 的 作用 ， 
如 图 2-26 所 示 。 

总 之 ， 色 彩 的 使 用 并 没有 一 定 的 法 则 ， 如 果 一 定 要 用 某 个 法 则 去 套 ， 则 效果 只 会 适 得 其 
反 。 色 彩 的 运用 还 与 每 个 人 的 审美 观 、 个 人 喜好 、 知 识 层次 等 密切 相关 。 一 般 应 先 确定 一 种 
能 体现 主题 的 主体 色 ， 然 后 根据 具体 的 需要 通过 近似 和 对 比 的 手段 来 完成 整个 页 面 的 配色 方 
案 。 整 个 页 面 在 视觉 上 应 该 是 一 个 整体 ， 以 达到 和 谐 、 悦 目的 视觉 效果 ， 如 图 2-27 所 示 。 


图 2-26 网 页 留 白色 处 理 图 2-27 网 页 色彩 的 搭配 


2.3 布局 网 站 板块 结构 


在 规划 网 站 的 页 面前 ， 对 所 要 创建 的 网 站 要 有 充分 的 认识 和 了 解 。 大 量 的 前 期 准备 工作 
可 使 设计 者 在 规划 网 页 时 胸有成竹 ， 得 心 应 手 ， 一 路 畅行 。 在 网 站 中 网 页 布局 大 致 可 分 为 
“ 国 ” 字 型 、 标 题 正文 型 、 左 右 框架 型 、 上 下 框架 型 、 综 合 框架 型 、 封 面 型 、Flash 型 等 。 


2.3.1 “ 国 ” 字 型 


“ 国 ” 字 型 也 可 以 称 为 “ 同 ” 字 型 ， 它 是 布局 一 些 大 型 网 站 时 常用 的 一 种 结构 类 型 ， 即 
网 页 最 顶端 是 网 站 的 标题 和 横幅 广告 条 ， 接 下 来 是 网 站 的 主要 内 容 。 网 页 左右 分 列 一 些 内 容 
条 目 ， 中 间 是 主要 部 分 ， 与 左右 一 起 罗列 到 底 。 顶 端 最 下 方 是 网 站 的 一 些 基本 信息 、 联 系 方 
式 和 版 权 声明 等 。 这 种 结构 几乎 是 网 上 使 用 最 多 的 一 种 结构 类 型 ， 如 图 2-28 所 示 。 


图 2-28 “ 国 ” 字 型 网 页 结构 
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2.3.2 ”标题 正文 型 


标题 正文 型 即 网 页 最 上 方 是 标题 或 类 似 的 一 些 东 西 ， 下 方 是 正文 ， 如 图 2-29 所 示 。 
网 站 的 文章 页 面 或 注册 页 面 等 采用 的 就 是 这 种 类 型 。 


长 


图 2-29 ”标题 正文 型 网 页 结构 


2.3.3 ”左右 框架 型 

左右 框架 型 是 一 种 左右 为 两 页 的 框架 结构 。 一 般 来 说 ， 左 侧 是 导航 链接 ， 有 时 最 上 方 会 
有 一 个 小 的 标题 或 标志 ， 右 侧 是 正文 。 大 部 分 的 大 型 论坛 采用 的 都 是 这 种 结构 ， 有 一 些 企业 
网 站 也 喜欢 采用 这 种 结构 。 这 种 类 型 的 结构 非常 清晰 ， 一 目 了 然 ， 如 图 2-30 所 示 。 
2.3.4 上 下 框架 型 


上 下 框架 型 与 左右 框架 型 类 似 ， 区 别 仅 在 于 这 是 一 种 分 为 上 下 两 部 分 的 框架 ， 如 图 2-31 


图 2-30 左右 框架 型 网 页 结构 图 2-31 上 下 框架 型 网 页 结构 


2.3.5 ”综合 框架 型 
综合 框架 型 是 多 种 结构 的 结合 ， 是 相对 复杂 的 一 种 框架 结构 ， 如 图 2-32 所 示 。 
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图 2-32 综合 框架 型 网 页 结构 


2.3.6 ”封面 型 


封面 型 网 页 结构 基本 上 出 现在 一 些 网 站 的 首页 ， 大 部 分 为 一 些 精美 的 平面 设计 与 一 些小 
的 动画 相 结合 ， 放 上 几 个 简单 的 链接 ， 或 者 仅 是 一 个 “进入 ”的 链接 ， 甚 至 直接 在 首页 的 图 
片上 做 链接 而 没有 任何 提示 。 这 种 类 型 大 部 分 出 现在 企业 网 站 和 个 人 主页 。 如 果 处 理 得 好 ， 
则 会 给 入 带 来 赏心悦目 的 感觉 ,如 图 2-33 所 示 。 


2.3.7 Flash 型 


其 实 Flash 型 网 页 结构 与 封面 型 结构 是 类 似 的 ， 只 是 这 种 类 型 采用 了 目前 非常 流行 的 
Flash。 与 封面 型 不 同 的 是 ， 由 于 Flash 具有 强大 的 功能 ， 所 以 页 面 所 表达 的 信息 更 丰富 。 其 
视觉 效果 及 听觉 效果 如 果 处 理 得 当 ， 绝 不 亚 于 传统 的 多 媒体 ， 如 图 2-34 所 示 。 


同 Dhe a eaver 动态 网 站 开发 
. = 案例 课堂 罗 ~ 


NN 2-33 ”封面 型 网 页 结构 2-34 ”Flash 型 网 页 结构 


2.4 网 站 配色 应 用 案例 
在 了 解 了 网 站 色彩 的 搭配 原理 与 技巧 后 ， 下 面 介绍 一 些 网 站 配色 的 应 用 案例 。 


2.4.1 案例 1 一 一 网 络 购物 网 站 的 色彩 应 用 


网 络 购物 类 网 站 襄 括 的 范围 比较 广泛 ， 不 仅 有 文化 的 时 尚 ， 而 且 还 有 品牌 的 时 尚 。 品 牌 
的 时 尚 多 通过 服饰 、 鞋 帼 和 装饰 品 等 体现 出 来 ， 给 人 一 种 高 雅 娴 静 的 美 。 

通常 情况 下 ， 说 起 具有 品牌 时 尚 的 女性 服装 和 鞋子 ， 人 们 脑海 中 就 会 不 自觉 地 涌现 出 那 
些 红色 、 紫 色 以 及 粉红 色 ， 因 为 这 些 颜 色 已 经 成 为 女性 的 专用 色彩 ， 所 以 典型 的 女性 服饰 都 
是 以 这 些 专用 色 作为 网 站 的 配色 颜色 。 

如 图 2-35 所 示 即 为 一 个 主 色调 为 红色 (中 明度 、 中 纯度 )， 辅 助 色 为 灰色 ( 低 明度 、 低 纯 
度 )、 蓝 色 ( 中 明度 、 中 纯度 ) 和 白色 (高 明度 、 高 纯度 ) 的 时 尚 网 站 。 该 网 站 的 红色 给 人 以 醒目 温 
暖 的 感觉 ， 白色 则 给 入 干净 、 明亮 的 感觉 。 


2-35 网络 购物 网 站 的 色彩 应 用 


人 证 


2.4.2 ”案例 2 一 一 游戏 网 站 的 色彩 应 用 


随 着 互联 网 技术 的 不 断 发 展 ， 各 种 类 型 的 游戏 网 站 如 雨后春笋 般 出 现 ， 并 逐渐 成 为 娱乐 
网 站 中 不 可 缺少 的 类 型 。 其 网 站 的 风格 和 颜色 也 是 千变万化 ， 随 着 游戏 性 质 的 不 同 而 呈现 出 
不 同 的 风格 。 

如 图 2-36 所 示 是 一 个 以 拳击 为 题材 的 游戏 网 站 。 该 网 站 的 主 色调 为 红色 (中 明度 、 中 纯 
度 )， 辅 助 色 为 黑色 ( 低 明度 、 低 纯度 ) 和 黄色 (中 明度 、 中 纯度 )。 拳 击 运 动 凭借 力量 取胜 ， 所 以 
该 网 站 运用 具有 强悍 的 人 物 图 片 展现 游戏 的 性 质 ， 运 用 大 面积 的 红色 修饰 整个 网 页 ， 意 在 突 
出 动感 的 活力 ; 而 运用 黑色 和 黄色 作为 修饰 色 ， 则 更 加 突出 了 整个 网 页 的 武力 色彩 ， 给 人 一 
种 身 临 其 境 的 感觉 。 
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图 2-36 ”游戏 网 站 的 色彩 应 用 


如 图 2-37 所 示 即 为 一 个 战斗 性 游戏 类 网 站 。 该 网 站 的 主 色调 为 灰 蓝 色 (中 明度 、 中 纯 
度 )， 辅 助 色 为 黑色 ( 低 明度 、 低 纯度 )、 黄 褐色 (中 明度 、 中 纯度 )。 
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图 2-37 ”游戏 网 站 色 的 彩 应 用 
网 站 大 面积 使 用 蓝 灰 色 修饰 网 页 ， 给 人 一 种 深 幽 、 复 古 的 感觉 ， 仿 佛 让 人 回 到 了 那 悠远 
的 远古 时 代 。 使 用 黑色 和 黄 褐 色 做 点 级 ， 更 加 突出 了 远古 人 决斗 的 场景 ， 从 而 吸引 更 多 浏览 
者 进入 到 虚幻 的 战斗 中 去 。 
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2.4.3 ”案例 3 一 一 企业 门户 网 站 的 色彩 应 用 


企业 类 网 站 在 整个 网 站 界 中 占据 着 重要 的 地 位 ， 充 当 着 网 站 设计 的 主力 军 ， 其 网 站 配色 
也 十 分 重要 ， 是 初学 者 必须 学 习 的 案例 。 


1. 以 企业 形象 为 主 的 网 站 


以 企业 形象 为 主体 宣传 的 网 站 ， 表 现形 式 与 众 不 同 ， 经 常 以 宽广 的 视野 、 强 大 的 视觉 冲 
击 力 ， 并 配 以 震撼 的 音乐 和 气 宇 轩 昂 的 色彩 ， 将 企业 形象 不 折 不 扣 地 展现 在 世人 面前 ， 给 人 
以 信任 和 安全 的 感觉 。 

如 图 2-38 所 示 就 是 一 个 典型 的 以 企业 形象 为 主 的 主页 。 该 网 页 是 一 个 房地产 网 站 的 首 
页 。 该 网 站 的 主 色调 为 深蓝 色 ( 中 明度 、 中 纯度 )， 辅 助 色 为 黑色 ( 低 明度 、 低 纯度 )、 红 色 ( 中 明 
度 、 中 纯度 ) 和 淡 黄 色 ( 高 明度 、 中 纯度 )， 页 面 以 深蓝 色 为 主 修饰 色 ， 给 人 一 种 深 幽 、 淡 雅 的 


图 2-38 ”以 企业 形象 为 主 的 网 站 首页 


如 图 2-39 所 示 也 是 一 个 以 企业 形象 为 主 的 地 产 公司 网 站 。 该 网 站 的 主 色调 为 瞳 红色 (中 中 
度 、 中 纯度 )， 辅 助 色 为 灰色 (中 明度 、 低 纯度 )， 页 面 采用 暗 红 色 来 勾勒 修饰 ， 并 运用 战争 年 
代 战 士 们 冲锋 陷 阵 的 图 片 作为 此 网 站 的 主 背 景 ， 意 在 向 人 们 展现 此 企业 犹如 抗战 时 期 的 中 国 
- 样 ， 有 毅力 、 有 动力 、 有 活力 ， 并 且 有 足够 的 信心 将 自己 的 企业 做 大 做 强 。 男 外 ， 用 灰色 
作为 修饰 色 ， 更 加 表现 出 企业 坚定 的 决心 和 充足 的 信心 。 

2. 以 企业 产品 为 主 的 网 站 


以 企业 产品 为 主 的 网 站 大 都 是 为 了 推销 其 产品 ， 整 个 网 页 贯穿 着 产品 的 各 种 介绍 ， 并 从 
整体 和 局 部 准确 地 展示 了 产品 的 性 能 和 质量 ， 从 而 突出 产品 的 特点 和 优越 性 。 此 类 网 站 的 表 
现 手法 比较 新 颖 ， 总 是 在 网 站 首页 或 欢迎 页 面 以 产品 形象 作为 展示 的 核心 ， 同 时 配 以 动画 或 
音效 等 ， 吸 引 浏览 者 的 注意 力 ， 从 而 达到 宣传 自己 企业 的 目的 。 

如 图 2-40 所 示 为 菜品 牌 汽 车 厂商 的 网 站 。 该 网 站 是 以 汽车 销售 为 主 的 企业 性 网 站 ， 用 黑 
色 作 为 主 色调 ( 低 明度 、 低 纯度 )， 用 以 展现 企业 产品 汽车 的 强悍 与 优雅 。 特 别 是 运用 灰色 (中 


四 到 


明度 、 低 纯度 ) 做 辅助 色 搭 配 ， 使 页 面 在 稳重 中 增添 了 明亮 的 色彩 ， 增 加 了 汽车 的 力量 感 ， 从 
而 将 企业 产品 醒目 地 展现 给 了 浏览 者 。 
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图 2-40 ”以 企业 产品 为 主 的 网 站 
温暖 舒适 的 色调 ， 稳 重 高 雅 的 装饰 ， 是 一 个 家 庭 装饰 的 重 中 之 重 ， 而 作为 地 板 类 网 站 ， 
如 图 2-41 所 示 ， 该 网 站 成 功 地 把 握 消 费 者 的 消费 心理 ， 其 主 色 调 为 浅 棕色 (高 明度 、 中 纯 
度 )， 辅 助 色 为 米黄 色 (中 明度 、 中 纯度 )。 


2-41 ”以 企业 产品 为 主 的 网 站 
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该 网 站 是 一 个 知名 品牌 柏 高 地 板 的 网 站 ， 采 用 的 是 两 种 比较 接近 的 颜色 ， 整 个 画面 渗透 
着 清新 淡雅 的 情调 ， 充 和 盈 着 浪漫 温馨 的 气氛 。 其 中 的 浅 棕色 属于 中 性 色 ， 给 人 一 种 平静 的 感 
觉 ， 而 米黄 色 则 属于 暖色 ， 跟 浅 棕色 搭配 在 一 起 ， 给 人 一 种 宾至如归 的 感觉 。 另 外 该 网 页 在 
设计 时 把 产品 置 于 浅 棕色 色调 中 ， 展 现 出 其 产品 的 古典 特色 ， 从 而 让 浏览 者 能 从 视觉 上 更 进 
一 步 地 了 解 产 品 ， 达 到 了 宣传 产品 的 目的 。 


2.4.4 ”案例 4 一 一 时 政 新 闻 网 站 的 色彩 应 用 


所 谓 时 政要 闻 类 网 站 是 指 那些 以 提供 专业 动态 信息 为 主 ， 面 向 获取 信息 的 专业 用 户 的 网 
站 。 此 类 网 站 比 门户 类 网 站 更 具有 特色 。 如 图 2-42 所 示 即 为 一 个 标准 的 时 政要 闻 类 网 站 。 
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2-42 ”时 政 新 闻 网 站 的 色彩 应 用 


该 网 站 的 主 色调 为 蓝 色 (高 明度 、 高 纯度 )， 辅 助 色 为 白色 (高 明度 、 高 纯度 )。 该 网 站 结构 
清晰 明了 ， 各 个 板块 分 配 明朗 ， 同 时 该 网 站 之 间 的 色彩 调和 也 非常 到 位 ， 用 白色 作为 背景 


色 ， 更 显示 出 了 蓝 色 的 纯净 与 舒适 ， 使 整个 页 面 显得 简单 而 又 整齐 ， 给 人 一 种 赏心悦目 的 


2.4.5 “案例 5 一 一 影音 视频 网 站 的 色彩 应 用 


在 众多 的 网 站 中 ， 影 音 类 网 站 是 受 欢 迎 程 度 很 高 的 网 站 之 一 ， ， 特 别 是 青少年 群体 无 疑 是 
影音 类 网 站 浏览 者 的 主角 。 由 于 影音 类 网 站 重点 以 突出 影像 和 声音 为 特点 ， 所 以 此 类 网 站 在 
影像 和 声音 方面 的 表现 尤为 突出 。 

如 图 2-43 所 示 的 网 站 就 运用 了 具有 空旷 气息 的 蓝 色 作为 整个 网 页 修饰 色 ， 突 出 了 此 网 站 
的 自然 气息 。 该 网 站 的 主 色调 为 蓝 色 (中 明度 、 中 纯度 )， 辅 助 色 为 红色 (中 明度 、 中 纯度 ) 和 白 
色 ( 高 明度 、 高 纯度 )。 蔚 蓝 的 天 空 、 清 澈 的 湖水 、 岗 峨 的 高 山 ， 一 切 仿佛 就 在 眼前 ， 带 给 人 一 
种 心旷神怡 的 感觉 。 使 用 自然 的 白色 更 加 衬托 出 蓝 色 洁 净 和 优雅 ， 最 后 运用 亮 眼 的 红色 作为 


整个 网 站 的 点 


图 影音 视频 网 站 的 色彩 应 用 
2.4.6 ”案例 6 一 一 电子 商务 网 站 的 色彩 应 用 


所 谓 电子 商务 是 指 买卖 双方 不 用 见面 ， 只 是 利用 简单 、 快 捷 、 低 成 本 的 电子 通讯 方式 


来 进行 各 种 商贸 活动 的 行为 。 随 着 科学 的 发 展 、 互 联网 的 迅速 普及 ， 各 种 类 型 
站 有 如 雨后春笋 般 涌 现 。 


如 图 2-44 所 示 网 站 就 是 一 个 典型 的 电子 商务 网 站 。 该 网 站 的 主 色 调 为 棕色 (中 明度 、 中 纯 


组 色彩 ， 起 到 烘托 修饰 的 作用 ， 从 而 更 加 鲜明 地 突出 网 站 内 容 的 主 


加 


芳 襄 忻 区 加 二 到 一 一 圭 雯 二 习 得 首 僻 贞 需 z 洲 


GG 


的 电子 商务 网 


度 )， 辅 助 色 为 黑色 ( 低 明 度 、 低 纯度 )、 灰 色 ( 中 明度 、 中 纯度 ) 和 白色 (高 明度 、 高 纯度 )。 该 网 
站 大 面积 使 用 棕色 来 修饰 整个 房间 家 具 的 颜色 。 棕 色 是 一 种 中 性 色 ， 含有 冷色 调 的 酷 和 暖色 


调 的 柔 ， 用 这 种 颜色 配置 的 家 具 ， 给 人 一 种 轻松 舒适 的 感觉 。 


2-44 ”电子 商务 网 站 的 色彩 应 用 


另外 ， 使 用 黑色 和 灰色 作为 框架 的 修饰 色 ， 更 衬托 出 棕色 的 安静 。 使 用 


色 作 为 链接 字 


体 色 , 给 人 一 种 醒目 的 感觉 ， 整 个 网 页 都 活跃 了 起 来 ， 更 加 突出 了 产品 的 优点 。 


53®@ 
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2.4.7 案例 7 一 一 娱乐 网 站 的 色彩 应 用 


在 众多 类 别 的 网 站 中 ， 思 想 最 活跃 、 格 调 最 休闲 、 色 彩 最 缤纷 的 网 站 非 娱 乐 类 网 站 莫 
属 ， 格 式 多 样 化 的 娱乐 类 网 站 ， 总 是 通过 独特 的 设计 思路 来 吸引 浏览 者 注意 力 ， 表 现 其 个 性 
的 网 站 空间 。 如 图 2-45 所 示 就 是 一 个 音乐 类 网 站 。 


Sigm-up at Michelle & Jessica's websites 
and get exclusive brand new songs 
Plus zcceive thc latcst mcews om theizr mecwv 
albums, uniock fcaturcs on the sites & zaorc! 


图 2-45 ”娱乐 网 站 的 色彩 应 用 
该 网 站 的 主 色调 为 黑色 ( 低 明 度 、 低 纯度 )， 辅 助 色 为 紫红 色 ( 中 明度 、 中 纯度 ) 和 白色 (高 明 
度 、 高 纯度 )， 使 用 具有 神秘 色彩 的 黑色 作为 通 篇 修饰 色 ， 从 而 调动 人 们 的 好 奇 心 ， 再 使 用 紫 
红色 来 点 缀 人 物 活动 的 场景 ， 让 整个 网 页 的 气氛 活跃 起 来 。 另 外 ， 使 用 小 范围 白色 来 烘托 其 
网 站 的 娱乐 性 能 ， 很 容易 给 人 留 下 永恒 的 回忆 。 


2.5 ”实战 演练 一 一 定位 网 站 页 面 的 框架 


在 网 站 布局 中 采用 “综合 框架 型 ”结构 对 网 站 进行 布局 ， 即 网 站 的 头 部 主要 用 于 放置 网 
站 Logo 和 网 站 导航 ， 网 站 的 左 框 架 主要 用 于 放置 商品 分 类 、 销 售 排行 框 等 ， 网 站 的 主体 部 分 
则 为 显示 网 站 的 商品 和 对 商品 的 购买 交易 ， 网 站 的 底部 主要 放置 版 权 信息 等 。 

设计 网 页 之 前 ， 设 计 者 可 以 先 在 Photoshop 中 勾画 出 框架 ， 然 后 再 在 该 框架 的 基础 上 进行 
布局 ， 有 具体 的 操作 步骤 如 下 。 

EC 打开 Photoshop CS6， 如 图 2-46 所 示 。 

EECDp 选择 【文件 】 一 【新 建 】 菜 单 命令 ， 打 开 【 新 建 】 对 话 框 ， 在 其 中 设置 文档 的 

宽度 为 1024 像素 、 高 度 为 800 像素 ， 如 图 2-47 所 示 。 

TB 单 击 【确定 】 按 钮 ， 即 可 创建 一 个 1024x800 像素 的 文档 ， 如 图 2-48 所 示 。 

ES 选择 左 侧 工具 框 中 的 【和 矩形 工具 】， 并 调整 路 径 状 态 ， 画 一 个 矩形 框 ， 如 
2-49 所 示 。 
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图 2.46 Photoshop CS6 的 操作 界面 图 2.47 【新 建 】 对 话 框 | N 
图 2-48 创建 空白 文档 图 2-49 ”绘制 矩形 框 


ECEIRD 使 用 文字 工具 ， 创 建 一 个 文本 图 层 ， 输 入 “网 页 的 头 部 ”， 如 图 2-50 所 示 。 


EEI9 依次 绘 出 网 站 的 中 左 、 中 右 和 底部 ， 网 站 的 结构 布局 最 终 如 图 2-51 所 示 。 
确定 好 网 站 框架 后 ， 就 可 以 结合 各 相关 知识 进行 网 站 不 同 区 域 的 布局 设计 了 。 
网 站 页 面 的 基部 | 网 站 页 面 的 头 部 
网 站 页 面 的 中 在 网 站 页 面 的 中 右 
网 站 页 面 的 底部 
图 2-50 输入 文字 图 2-51 网 站 页 面 结构 的 最 终 布 局 
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2.6 ” 跟 我 练 练 手 


2.6.1 练习 目标 
能 够 熟练 掌握 本 章节 所 讲 内 容 。 


2.6.2 上 机 练习 


练习 1: 使 用 色彩 搭配 网 页 。 
练习 2: 网 页 色彩 的 搭配 。 

练习 3: 布局 网 站 板块 的 结构 。 
练习 4: 网 站 配色 应 用 案例 。 
练习 5: 定位 网 站 的 页 面 框架 。 


2.7 高 手 甜 点 


甜点 1: 如 何 使 自己 的 网 站 的 配色 更 具有 亲和力 ? 


在 对 网 页 进行 配色 时 ， 必 须 考虑 网 站 本 身 的 性 质 。 如 果 网 站 的 产品 以 化 妆 品 为 主 ， 那 么 
这 样 的 网 站 的 配色 多 采用 柔和 、 和 柔美 、 明 亮 的 色彩 。 这 样 就 可 以 给 人 一 种 温柔 的 感觉 ， 具 有 
很 强 的 亲和力 。 


甜点 2: 如 何在 自己 的 网 页 中 营造 出 地 中 海风 情 的 配色 ? 


使 用 “ 白 十 蓝 ” 的 配色 ， 可 营造 出 地 中 海风 情 的 配色 。 白 色 很 容易 令 人 感到 十 分 的 自 
由 ， 好 像 是 属于 大 自然 的 一 部 分 ， 令 人 心胸 开阔 ， 似 乎 像 海 天 一 色 的 大 自然 一 样 开 阔 自 在 。 
要 想 营造 这 样 的 地 中 海 式 风情 ， 必 须 把 室内 的 物品 ， 比 如 家 具 、 家 饰品 、 窗 帘 等 都 限制 在 一 
个 色 系 中 ， 这 样 就 会 产生 统一 感 。 对 于 向 往 怕 海蓝 天 的 人 士 ， 和 白色 与 蓝 色 是 居家 生活 最 佳 的 
搭配 选择 。 


T CS6 是 一 款 专业 的 网 页 编辑 软件 ， 利 用 它 可 以 创建 网 页 。 其 强大 


Dreamweave 
的 站 点 管理 功能 ， 合 理 的 站 点 结构 能 够 加 快 对 站 点 的 设计 ， 提 高 工作 效率 ， 节 省 时 


间 。 本 章 将 要 介绍 


创建 并 管理 网 站 站 点 。 


的 内 容 就 是 如 何 利用 Dreamweaver CS6 
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3.1 认识 Dreamweaver CS6 的 工作 环境 


在 学 习 如 何 使 用 Dreamweaver CS6 制作 网 页 之 前 ， 先 来 认识 一 下 Dreamweaver CS6 的 工 
作 环 境 。 


3.1.1 启动 Dreamweaver CS6 


完成 Dreamweaver CS6 的 安装 后 ， 就 可 以 启动 Dreamweaver CS6 了 ， 具 体操 作 步 又 
如 下 。 
EEC 选择 【开始 】 一 【所 有 程序 】 一 Adobe Dreamweaver CS6 选项 ， 或 双击 桌面 上 
的 Dreamweaver CS6 快捷 图 标 ， 即 可 启动 Dreamweaver CS6。 在 弹出 【默认 编辑 
器 】 对 话 框 中 选中 需要 Dreamweaver 为 默认 编辑 器 的 文件 类 型 ， 如 图 3-1 所 示 。 
单 击 【确定 】 按 钮 ， 进 入 Dreamweaver CS6 的 初始 化 界面 。Dreamweaver CS6 
的 初始 化 界面 时 尚 、 大 方 ， 给 人 以 焕然 一 新 的 感觉 ， 如 图 3-2 所 示 。 


NR 
Adobe Jreanveavar 柠 基 自身 设置 为 以 下 文件 类 2 和 和 3 编辑 舌 


Wative gave Fogrs Gy) Tovaseript G5) 
JTeve surve Pegns Usp) 团 情 委任 下 Cs) 


国 可 扩 届 标记 误 离 Gmll 
四 za He etd 
后 Pt why) 
CC | MW 
图 3-1 【默认 编辑 器 】 对 话 框 图 3-1 Dreamweaver CS6 的 初始 化 界面 


TB 通过 初始 化 界面 ， 便 可 打开 Dreamweaver CS6 工作 区 的 开始 页 面 。 默 认 情 况 
下 ，Dreamweaver CS6 的 工作 区 布局 是 以 【设计 】 视 图 布局 的 ， 如 图 3-3 所 示 。 
ES 在 开始 页 面 中 ， 单 击 【 新 建 】 栏 下 方 的 HTML 选项 ， 即 可 打开 Dreamweaver 

4 所 示 。 


3-3 ”Dreamweaver CS6 的 开始 界面 3-4 Dreamweaver CS6 的 工作 界面 


3.1.2 认识 Dreamweaver CS6 的 工作 区 


在 Dreamweaver 的 工作 区 可 查看 到 文档 和 对 象 属性 。 工 作 区 将 许多 常用 的 操作 放置 于 工 
具 栏 中 ， 便 于 快速 地 对 文档 进行 修改 。Dreamweaver CS6 的 工作 区 主要 由 应 用 程序 栏 、 菜 单 
栏 、【 插 入 】 面 板 、 文 档 工具 栏 、 文 档 窗口 、 状 态 栏 、【 属 性 】 面 板 和 面板 组 等 部 分 组 成 ， 
如 图 3-5 所 示 。 


Dw IE (= LSL > ] 
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图 3-5 Dreamweaver CS6 的 工作 界面 
1. 菜单 栏 


该 部 分 包括 10 个 菜单 ， 单 击 每 个 菜单 ， 会 弹出 下 拉 菜 单 ， 利 用 菜单 中 的 命令 基本 上 能 够 
实现 Dreamweaver CS6 的 所 有 功能 ， 如 图 3-6 所 示 。 


文件 (月 ” 编 妃 ([E) 查看 (V) 插入 (1】 修改 (M) ”格式 (0) ”命令 (Q) ”站 点 (S$) ”窗口 (W) ”者 助 (H) 
图 3-6 菜单 栏 
2. 文档 工具 栏 


该 部 分 包含 3 种 文档 窗口 视图 (代码 、 拆 分 和 设计 ) 按 钮 、 各 种 查看 选项 和 一 些 常 用 的 操作 
功能 (如 在 浏览 器 中 预览 )， 如 图 3-7 所 示 。 


| 代码 | 拆 分 [ 设计 | 实时 视图 | 哆 . @. 只 . bX CG 标题: < 和 EX 档 | 


图 3-7 文档 工具 栏 


文档 工具 栏 中 常用 按钮 的 功能 如 下 。 

(1) 【显示 代码 视图 】 按 钮 Et 看 4: 单 击 该 按钮 ， 仅 在 文档 窗口 中 显示 和 修改 HTML 源 
代码 。 

(2) 【显示 代码 视图 和 设计 视图 】 按 钮 拆 分 ， 单 击 该 按钮 ， 在 文档 窗口 中 同时 显示 
HTML 源 代码 和 页 面 的 设计 效果 。 
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(3) 【显示 设计 视图 】 按 钮 设计 ， 单 击 该 按钮 仅 在 文档 窗口 中 显示 网 页 的 设计 效果 。 

(4) 【实时 视图 】 按 钮 , 衬 时 视 图 |， 单 击 该 按钮 ， 显 示 不 可 编辑 的 、 交 互 式 的 、 基 于 浏览 
器 的 文档 视图 。 

(5) 【多 屏幕 】 按 钮 出 ， 单 击 该 按钮 ， 可 以 多 屏幕 浏览 网 页 。 

(6) 【文档 标题 】 文 本 框 #: 于 ”该 文本 框 用 于 设置 或 修改 文档 的 标题 。 

(7) 【文件 管理 】 按 钮 4， 单 击 该 按钮 ， 通 过 弹出 的 菜单 可 实现 消除 只 读 属性 、 获 取 、 
取出 、 上 传 、 存 回 、 撤 销 取 出 、 设 计 备注 以 及 在 站 点 定位 等 功能 。 

(8) 【在 浏览 器 中 预览 /调试 】 按 钮 罗 j， 单 击 该 按钮 ， 可 在 定义 好 的 浏览 器 中 预览 或 调试 


NN 网 页 。 
(9) 【有 刷 新】 按钮 [图 ， 用 于 刷新 文档 窗口 的 内 容 。 


(10) 【可 视 化 助理 】 按 钮 名 单 击 该 按钮 ， 可 使 用 各 种 可 视 化 助理 来 设计 页 面 。 
(11) 【检查 浏览 器 兼容 】 按 钮 天 单 击 该 按钮 ， 可 检查 CSS 是 否 对 各 种 浏览 器 兼容 。 
(12) 【W3C 验证 】 按 钮 网 : 单 击 该 按钮 ， 可 检测 网 页 是 否 符合 W3C 标准 。 


3. 文档 窗口 


文档 窗口 用 于 显示 当前 创建 和 编辑 的 文档 。 在 该 窗口 中 ， 即 可 以 输入 文字 、 插 入 图 片 、 
绘制 表格 等 ， 也 可 以 对 整个 页 面 进行 处 理 ， 如 图 3-8 所 示 。 


二 nauedl prwu 要 


[em [ES ho .| a 同 | wex Wor 1/ 1 Wicede MFO) 


图 3-8 文档 窗口 


4. 状态 栏 


状态 栏 位 于 文档 窗口 的 底部 ， 包 括 3 个 功能 区 : 标签 选择 器 (用 于 显示 和 控制 文档 当前 插 
入 点 位 置 的 HTML 源 代码 标记 )、 窗 口 大 小 弹出 菜单 (用 于 显示 页 面 大 小 ， 允 许 将 文档 窗口 的 
大 小 调整 到 预定 义 或 自 定义 的 尺寸 ) 和 下 载 指示 器 (用 于 估计 下 载 时 间 ， 查 看 传输 时 间 )， 如 


图 3-9 所 示 。 
[ody [Rhos v| 回国 549 x 325v 1 Kk/ 1 和 Unicode (UTF-8) 


3-9 状态 栏 


5. 【属性 】 面 板 

【 属性】 面板 是 网 页 中 非常 重要 的 面板 ， 用 于 显示 在 文档 窗口 中 所 选 元 素 的 属性 ， 并 且 
可 以 对 被 选中 的 元 素 的 属性 进行 修改 。 该 面板 随 着 选择 元 素 的 不 同 而 显示 不 同 的 属性 ， 如 
图 3-10 所 示 。 


3-10 【属性 】 面 板 
6. 工作 区 切换 器 


单 击 【 工 作 区 切换 器 】 下 拉 箭 头 ， 可 以 打开 一 些 常用 的 调 板 。 在 下 拉 菜 单 中 选择 命令 
即 可 更 改 页 面 的 布局 ， 如 图 3-11 所 示 。 


7. 【插入 】 面 板 


【插入 】 面 板 包含 将 各 种 网 页 元 素 (比如 图 像 、 表 格 和 AP 元 素 等 ) 插 入 到 文档 时 的 快捷 按 
钮 。 每 个 对 象 都 是 一 段 HTML 代码 ， 插 入 不 同 的 对 象 时 ， 可 以 设置 不 同 的 属性 。 单 击 相应 的 
按钮 ， 可 插入 相应 的 元 素 。 要 显示 【插入 】 面 板 ， 选 择 【 窗 口 】 一 【插入 】 菜 单 命令 即 可 ， 
如 图 3-12 所 示 。 


8. 【文件 】 面 板 


【文件 】 面 板 用 于 管理 文件 和 文件 夹 ， 无 论 它们 是 Dreamweaver 站 点 的 一 部 分 ， 还 是 位 
于 远程 服务 器 上 。 在 【文件 】 面 板 上 还 可 以 访问 本 地 磁盘 上 的 全 部 文件 ， 如 图 3-13 所 示 。 
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图 3-11 工作 区 切换 器 图 3-12 【插入 】 面板 图 3-13 【文件 】 面 板 
3.1.3 ”熟悉 Dreamweaver CS6 的 面板 
【插入 】 面 板 中 包括 8 组 面板 ， 分 别 是 【常用 】 面 板 、【 布 局 】 面 板 、【 表 单 】 面 板 、 
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【数据 】 面 板 、Spry 面板 、InContext Editing 面板 、【 文 本 】 面 板 和 【收藏 夹 】 面 板 。 各 面板 
的 功能 具体 如 下 。 


1. 【常用 】 面 板 


在 【常用 】 面 板 中 ， 用 户 可 以 创建 和 插入 最 常用 的 对 象 ， 比 如 图 像 和 表格 等 。 如 图 3-14 
所 示 。 


2. 【布局 】 面 板 
在 【插入 】 面 板 中 单 击 “ 常 用 ”名 称 旁 的 下 三 角 按钮 ， 在 弹出 的 下 拉 列 表 中 选择 【 布 


NN 局 】 项 ， 即 可 打开 【布局 】 面 板 ， 如 图 3-15 所 示 。【 布 局 】 面 板 包含 插入 表格 、 层 和 框架 的 


常用 命令 按钮 和 部 分 Spry 工具 按钮 。 
3. 【表单 】 面 板 


在 【插入 】 面 板 中 单 击 “ 布 局 ”名 称 旁 的 下 三 角 按钮 ， 在 弹出 的 下 拉 列 表 中 选择 【 表 
单 】 项 ， 即 可 打开 【表单 】 面 板 ， 如 图 3-16 所 示 。【 表 单 】 面 板 包含 一 些 常 用 的 创建 表单 和 
插入 表单 元 素 的 按钮 及 一 些 Spry 工具 按钮 。 


GRADE 


和 


图 3-14 【常用 】 面 板 图 3-15 【和布 局】 面板 图 3-16 【表单 】 面 板 
4. 【数据 】 面 板 


在 【插入 】 面 板 中 单 击 “ 表 单 ” 名 称 旁 的 下 三 角 按 钮 这 ， 在 弹出 的 下 拉 列 表 中 选择 【 数 
据 】 项 ， 即 可 打开 【数据 】 面 板 。 该 面板 包含 一 些 Spry 工具 按钮 和 常用 的 应 用 程序 按钮 ， 如 
图 3-17 所 示 。 


5. Spry 面板 


在 【插入 】 面 板 中 单 击 “ 数 据 ” 名 称 旁 的 下 三 角 按钮 ， 在 弹出 的 下 拉 列 表 中 选择 Spry 
项 ， 即 可 打开 Spry 面板 。 该 面板 主要 包含 Spry 工具 按钮 ， 如 图 3-18 所 示 。 


6. InContext Editing 面板 


InContext Editing 面板 包括 两 个 选项 ， 分 别 是 【创建 可 重复 区 域 】 和 【创建 可 编辑 区 
域 】， 如 图 3-19 所 示 。 


全 


3-17 【数据 】 面 板 3-18 ”Spry 面板 3-19 InContext Editing 面板 


@ 【创建 可 重复 区 域 】: InContext Editing 重复 区 域 由 开始 标签 中 包含 ice:repeating 属 
性 的 一 对 HTML 标签 构成 。 重复 区 域 定义 了 用 户 在 浏览 器 中 进行 编辑 时 ， 可 以 “ 重 
复 ” 创 建 页 面 区 域 。 

e@ 【创建 可 编辑 区 域 】: 用 于 定义 用 户 可 以 直接 在 浏览 器 中 编辑 的 页 面 区 域 。 


7. 【文本 】 面 板 

【文本 】 面 板 主要 包含 对 字体 、 文 本 和 段落 具有 调整 辅助 功能 的 按钮 ， 如 图 3-20 所 示 。 
8. 【收藏 夹 】 面板 

【收藏 夹 】 面 板 用 于 将 常用 的 按钮 添加 到 该 面板 中 ， 以 便于 以 后 使 用 ， 如 图 3-21 所 示 。 
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图 3-20 【文本 】 面 板 图 3-21 【收藏 夹 】 面板 


3.2 创建 站 点 
在 开始 制作 网 页 之 前 ， 首 先 需 要 定义 一 个 新 站 点 ， 以 便于 在 后 面 的 操作 中 能 更 好 地 利用 
站 点 对 文件 进行 管理 ， 尤 其 能 尽 可 能 减少 链接 与 路 径 方面 的 错误 。 
3.2.1 案例 1 一 一 创建 本 地 站 点 


Dreamweaver 站 点 是 一 种 用 于 管理 网 站 中 所 有 关联 文档 的 工具 ， 通 过 站 点 可 以 实现 将 文 
件 上 传 到 网 络 服务 器 、 自 动 跟踪 和 维护 、 管 理 文件 以 及 共享 文件 等 功能 。Dreamweaver 中 的 
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站 点 包括 本 地 站 点 、 远 程 站 点 和 测试 站 点 等 3 类 。 
@ 本 地 站 点 : 是 指 用 来 存放 整个 网 站 框架 的 本 地 文件 夹 ， 是 用 户 的 工作 目录 ， 一 般 制 
作 网 页 时 只 需 建立 本 地 站 点 即 可 。 
@ ”远程 站 点 : 是 指 存储 于 Internet 服务 器 上 的 站 点 和 相关 文档 。 通 常情 况 下 ， 为 了 不 连 
接 Internet 而 对 所 建 的 站 点 进行 测试 时 ， 可 在 本 地 计算 机 上 创建 远程 站 点 ， 对 真实 的 
Web 服务 器 进行 模拟 测试 。 
@ 测试 站 点 : 是 指 Dreamweaver 处 理 动 态 页 面 的 文件 夹 ， 使 用 此 文件 夹 生 成 动态 内 容 
并 在 工作 时 可 连接 到 数据 库 ， 对 动态 页 面 进行 测试 。 
在 Dreamweaver CS6 中 使 用 向 导 创 建 本 地 站 点 的 具体 步 又 如 下 。 
EEC 打开 Dreamweaver CS6， 选 择 【站 点 】 一 【新 建站 点 】 菜 单 命 令 ， 弹 出 【站 点 设 
置 对 象 】 对 话 框 ， 在 其 中 输入 站 点 的 名 称 ， 并 设置 本 地 站 点 文件 夹 的 路 径 和 名 称 ， 
然后 单 击 【 保 存 】 按 钮 ， 如 图 3-22 所 示 。 
本 了 TY 本 地 站 点 创建 完成 ， 在 【文件 】 面 板 的 【本 地 文件 】 窗 格 中 会 显示 该 站 点 的 根 
目录 ， 如 图 3-23 所 示 。 
Se er 
*_ 高 级 设置 
您 可 以 在 此 由 为 Dreamweaver 让 点 选择 本 地 文件 赤 和 名 称 ” 


站 点 名 称 : [ES 
本 好 让 上 文件 赤 ;CILesEAanneraer Pearent 一 


图 3-22 【站 点 设置 对 象 】 对 话 框 3-23 【本 地 文件 】 窗 格 


3.2.2 案例 2 一 一 使 用 【文件 】 面 板 创建 站 点 


在 【文件 】 面 板 中 提供 了 【管理 站 点 】 功 能 ， 利 用 该 功能 可 以 创建 站 点 ， 有 具体 的 操作 步 
又 如 下 。 
本 于 单 击 【文件 】 面 板 右 侧 的 下 三 角 按钮 ， 在 弹出 的 下 拉 列 表 中 选择 【管理 站 点 】 
选项 ， 如 图 3-24 所 示 。 
ED 弹出 【管理 站 点 】 对 话 框 ， 在 对 话 框 中 单 击 【新 建站 点 】 按 钮 ， 如 图 3-25 所 示 。 
攻 于 BY 弹出 【站 点 设置 对 象 】 对 话 框 ， 在 对 话 框 中 即 可 根据 前 面 介绍 的 方法 创建 本 地 
站 点 ， 如 图 3-26 所 示 。 


图 3-26 【站 点 设置 对 象 】 对 话 框 


3.3 管理 站 点 


设置 好 Dreamweaver CS6 的 站 点 后 ， 还 可 以 对 本 地 站 点 进行 管理 ， 比 如 打开 站 点 、 编 辑 
站 点 、 删 除 站 点 及 复制 站 点 等 。 


3.3.1 案例 3 一 一 打开 站 点 


站 点 创建 完毕 后 ， 如 果 不 能 一 次 完成 网 站 的 制作 ， 就 需要 再 次 打开 站 点 ， 对 站 点 中 的 内 
容 进 行 编辑 。 
打开 站 点 的 具体 操作 步骤 如 下 。 
ECDDp 选择 【窗口 】 一 【文件 】 菜 单 命 令 ， 打 开 【 文 件 】 面 板 ， 在 左边 的 站 点 下 拉 列 
表 中 选择 【管理 站 点 】 选 项 ， 如 图 3-27 所 示 。 
EECRP) 弹出 【管理 站 点 】 对 话 框 ， 单 击 站 点 名 称 列表 框 中 的 【我 的 站 点 】 选 项 ， 如 
图 3-28 所 示 。 
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EEID) 单 击 【 完 成 】 按 钮 ， 打 开 站 点 ， 如 图 3-29 所 示 。 


珊 3i 点 [地 视图 =] 
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NS SS 图 3-27 【文件 】 面 板 图 3-28 【管理 站 点 】 对 话 框 图 3-29 打开 的 站 点 
3.3.2 ”案例 4 一 一 编辑 站 点 


创建 了 站 点 之 后 ， 可 以 对 站 点 的 属性 进行 编辑 ， 有 具体 的 操作 步骤 如 下 。 

EEC 选择 【站 点 】 一 【管理 站 点 】 菜 单 命令 ， 打 开 【 管 理 站 点 】 对 话 框 。 从 中 选 定 
要 编辑 的 站 点 名 称 ， 然 后 单 击 【 编 辑 目 前 选 定 的 站 点 】 按 钮 ， 如 图 3-30 所 示 。 
EC 打开 【站 点 设置 对 象 】 对 话 框 ， 从 中 按照 创建 站 点 的 方法 对 站 点 进行 编辑 ， 如 

图 3-31 所 示 。 


图 3-30 【管理 站 点 】 对 话 框 图 3-31 【站 点 设置 对 象 】 对 话 框 
em 在 【管理 站 点 】〗 对 话 框 中 双击 站 点 的 名 称 ， 可 以 直接 打开 【站 点 设置 对 
并 象 〗 对 话 框 。 


国 于 BY 编辑 完成 单 击 【 保 存 】 按 钮 ， 返 回 【 管 理 站 点 】 对 话 框 ， 然 后 单 击 【 完 成 】 按 
钮 ， 即 可 完成 对 基点 的 编辑 操作 。 


3.3.3 ”案例 5 一 一 删除 站 点 
如 果 不 再 需要 使 用 Dreamweaver 对 本 地 站 点 进行 操作 ， 可 以 将 其 从 站 点 列表 中 删除 。 具 


体 的 操作 步骤 如 下 。 
EC 选择 要 删除 的 本 地 站 点 ， 然 后 在 【管理 站 点 】 对 话 框 中 单 击 【 删 除 当前 选 定 的 
站 点 】 按 钮 ， 如 图 3-32 所 示 。 
EC 弹出 Dreamweaver 对 话 框 ， 系 统 提示 用 户 删 除 站 点 操作 不 能 撤消 ， 询 问 是 否 要 
删除 本 地 站 点 。 单 击 【 是 】 按 钮 ， 即 可 删除 选 定 的 本 地 站 点 ， 如 图 3-33 所 示 。 
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图 3-32 【管理 站 点 】 对 话 框 图 3-33 ”信息 提示 框 


全 删除 站 点 操作 实际 上 只 是 删除 了 Dreamweaver 同 本 地 站 点 之 间 的 关系 ， 而 实 
半 。 际 的 本 地 站 点 内 容 (包括 文件 夹 和 文件 等 ) 仍 然 保 存在 磁盘 相应 的 位 置 上 。 因 此 用 
户 可 以 重新 创建 指向 其 位 置 的 新 站 点 ， 重 新 对 其 进行 管理 。 


3.3.4 ”案例 6 一 一 复制 站 点 


如 果 想 创建 多 个 结构 相同 或 类 似 的 站 点 ， 则 可 利用 站 点 的 可 复制 性 实现 。 复 制 站 点 的 具 
体 步骤 如 下 。 
EDp 在 【管理 站 点 】 对 话 框 中 单 击 【 复 制 当前 选 定 的 站 点 】 按 钮 ， 即 可 复制 该 站 
点 ， 如 图 3-34 所 示 。 
ED 新 复制 出 的 站 点 名 称 会 出 现在 【管理 站 点 】 对 话 框 的 站 点 列表 框 中 。 该 名 称 在 
原 站 点 名 称 的 后 面 会 添加 “复制 ”字样 ， 如 图 3-35 所 示 。 


图 3-34 【管理 站 点 】 对 话 框 图 3-35 复制 的 站 点 
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攻 于 BY 如 需要 更 改 站 点 名 称 ， 选 中 新 复制 的 站 点 ， 单 击 【 编 辑 】 按 钮 ， 即 可 对 其 更 
改 。 然 后 在 【管理 站 点 】 对 话 框 中 单 击 【 完 成 】 按 钮 ， 即 可 完成 对 站 点 的 复制 
操作 。 


3.4 “操作 站 点 文件 及 文件 来 


无 论 是 创建 空白 文档 ， 还 是 利用 已 有 的 文档 创建 站 点 ， 都 需要 对 站 点 中 的 文件 夹 或 文件 
进行 操作 。 利 用 【文件 】 面 板 ， 可 以 对 本 地 站 点 中 的 文件 夹 和 文件 进行 创建 、 删 除 、 移 动 和 
复制 等 操作 。 


3.4.1 案例 7 一 一 创建 文件 夹 


站 点 创建 完毕 后 ， 可 以 在 站 点 的 下 方 创建 文件 夹 ， 该 文件 夹 的 主要 作用 是 用 于 存放 网 页 
的 相关 资料 ， 比 如 网 页 图 片 、 网 页 中 的 CSS 样式 表 等 。 

在 本 地 站 点 中 创建 文件 夹 的 具体 步骤 如 下 。 

EC 选择 【窗口 】 一 【文件 】 菜 单 命 令 ， 打 开 【 文 件 】 面 板 ， 在 准备 新 建文 件 夹 的 
位 置 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【新 建文 件 夹 】 命 令 ， 如 图 3-36 所 示 。 

ECPy 新 建 的 文件 夹 的 名 称 处 于 可 编辑 状态 ， 可 以 对 新 建文 件 夹 重新 命名 ， 如 图 3-37 
所 示 。 

EEep 将 新 建文 件 夹 命名 为 images， 通 常 使 用 该 文件 夹 来 存放 图 片 。 单 击 新 建文 件 夹 
以 外 的 任意 位 置 ， 即 可 完成 文件 夹 的 新 建 和 重 命 名 操作 ， 如 图 3-38 所 示 。 
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图 3-36 选择 【新 建文 件 夹 】 命 令 3-37 ”新 建 的 文件 夹 图 3-38 重 命名 文件 夹 


如 果 想 修改 文件 夹 名 ， 选 定 文件 夹 后 ， 单 击 文件 夹 的 名 称 或 按 F2 键 ， 激 活 


my 
提示 
Ee 文字 使 其 处 于 可 编辑 状态 ， 然 后 输入 新 的 名 称 即 可 。 


3.4.2 ”案例 8 一 一 创建 文件 


文件 夹 创建 好 后 ， 就 可 以 在 文件 夹 中 创建 相应 的 文件 了 。 具 体 的 操作 步骤 如 下 。 

EECDRD 选择 【窗口 】 一 【文件 】 菜 单 命令 ， 打 开 【 文 件 】 面 板 ， 在 准备 新 建文 件 的 位 
置 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【新 建文 件 】 命 令 ， 如 图 3-39 所 示 。 

EGRPp 新 建文 件 的 名 称 处 于 可 编辑 状态 ， 可 以 为 新 建文 件 重新 命名 ， 如 图 3-40 所 示 。 

国 于 BY 新 建 的 文件 名 默认 为 untitled.html， 可 将 其 改 为 index.html。 单 击 新 建文 件 以 外 
的 任意 位 置 ， 即 可 完成 文件 的 新 建 和 重 命 名 操作 ， 如 图 3-41 所 示 。 
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图 3-39 选择 [新建 文件 】 菜单 命令 。 。 图 3-40 新 建 的 文件 图 3-41 重 命名 文件 
3.4.3 ”案例 9 一 一 文件 或 文件 夹 的 移动 和 复制 


站 点 下 的 文件 或 文件 夹 可 以 进行 移动 与 复制 操作 ， 有 具体 的 操作 步骤 如 下 。 

EEC 选择 【窗口 】 一 【文件 】 菜 单 命 令 ， 打 开 【 文 件 】 面 板 ， 选 中 要 移动 的 文件 或 
文件 夹 ， 然 后 拖 动 到 相应 的 文件 夹 即 可 ， 如 图 3-42 所 示 。 

EEC) 利用 剪 切 和 粘贴 的 方法 也 可 以 移动 文件 或 文件 夹 。 在 【文件 】 面 板 中 ， 选 中 要 
移动 或 复制 的 文件 或 文件 夹 并 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【编辑 】 一 【 剪 切 】 
或 【拷贝 】 命 令 ， 即 可 复制 文件 或 文件 夹 ， 如 图 3-43 所 示 。 
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图 3-42 移动 文件 图 3-43 复制 文件 
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EECSB 选中 目标 文件 夹 并 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【编辑 】 一 【粘贴 】 命 令 ， 
这 样 ， 文 件 或 文件 夹 就 会 被 移动 或 复制 到 相应 的 文件 夹 中 。 


3.4.4 ”案例 10 一 一 删除 文件 或 文件 夹 


对 于 站 点 下 的 文件 或 文件 夹 ， 如 果 不 再 需要 ， 就 可 以 将 其 删除 ， 具 体 的 操作 步骤 如 下 。 

EC 在 【文件 】 面 板 中 ， 选 中 要 删除 的 文件 或 文件 夹 ， 然 后 在 文件 或 文件 夹 上 右 

击 ， 在 弹出 的 快捷 菜单 中 选择 【编辑 】 一 【删除 】 命 令 或 者 按 Delete 键 ， 如 图 3-44 
所 示 。 

ECERPy 弹出 提示 对 话 框 ， 询 问 是 否 要 删除 所 选 文件 或 文件 夹 。 单 击 【 是 】 按 钮 ， 即 可 
将 文件 或 文件 夹 从 本 地 站 点 中 删除 ， 如 图 3-45 所 示 。 
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图 3-44 删除 文件 图 3-45 信息 提示 杠 


;| 和 站 点 的 删除 操作 不 同 ， 对 文件 或 文件 天 的 删除 操作 会 使 文件 或 文件 夹 从 磁 
站 盘 上 真正 地 被 删除 。 


3.5 ”实战 演练 一 一 建立 站 点 文件 和 文件 夹 


为 了 管理 和 日 后 的 维护 方便 ， 可 以 建立 一 个 文件 夹 来 存放 网 站 中 的 所 有 文件 ， 再 在 文件 
夹 内 建立 几 个 子 文件 夹 ， 将 文件 分 别 放 在 不 同 的 文件 夹 中 ， 比 如 图 片 可 以 放 在 images 文件 夹 
内 ，HTML 文件 放 在 根 目 录 下 等 。 
建立 站 点 文件 和 文件 夹 的 具体 步骤 如 下 。 
EC 选择 【窗口 】 一 【文件 】 菜 单 命令 ， 打 开 【 文 件 】 面 板 ， 在 站 点 名 称 “ 我 的 站 
点 ”上 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【新 建文 件 】 命 令 ， 如 图 3-46 所 示 。 
ED 新 建文 件 的 名 称 处 于 可 编辑 状态 ， 如 图 3-47 所 示 。 
区 于 B> 将 默认 的 新 建文 件 名 untitled.html 重 命名 为 index.html， 然 后 单 击 新 建文 件 以 外 
的 任意 位 置 ， 完 成 主页 文件 的 创建 ， 如 图 3-48 所 示 。 


文件 


图 3-46 选择 【新 建文 件 】 命 令 图 3-47 新建 的 文件 图 3-48 重 命名 文件 


EC 在 站 点 名 称 “我 的 站 点 ”上 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【新 建文 件 夹 】 命 
令 ， 如 图 3-49 所 示 。 

EEDp 新 建文 件 夹 的 名 称 处 于 可 编辑 状态 ， 如 图 3-50 所 示 。 

EDRDp 将 默认 的 新 建文 件 夹 名 untitled 重 命 名 为 “图片”， 此 文件 夹 将 用 于 存放 图 片 。 
单 击 新 建文 件 夹 以 外 的 任意 位 置 ， 完 成 图 片 文件 夹 的 创建 ， 如 图 3-51 所 示 。 
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图 3-49 选择 【新 建文 件 夹 】 命 令 3-50 ”新 建 的 文件 夹 3-51 重 命名 文件 夹 


3.6 ” 跟 我 练 练 手 


3.6.1 练习 目标 
能 够 熟练 掌握 本 章节 所 讲 的 内 容 。 


河 导 导 司 牌 避 9SO JeAeemueeJaq 一 上 HH 
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3.6.2 上 机 练习 


练习 1: 创建 网 站 站 点 。 

练习 2: 管理 网 站 站 点 。 

练习 3: 操作 站 点 文件 与 文件 夹 。 
练习 4: 建立 网 站 站 点 文件 和 文件 夹 。 


3.7 高 手 甜 点 


甜点 1: 在 【资源 】 面 板 中 ， 为 什么 有 的 资源 在 预览 区 中 无 法 正常 显示 (比如 Flash 动画 )? 


之 所 以 会 出 现 这 种 情况 ， 主 要 是 由 于 不 同类 型 的 资源 有 不 同 的 预览 显示 方式 。 比 如 Flash 
动画 ， 被 选中 的 Flash 在 预览 区 中 显示 为 占 位 符 ， 要 观看 其 播放 效果 ， 必 须 单 击 预览 区 中 的 播 
放 按钮 。 


甜点 2: 在 Adobe Dreamweaver CS6 的 【属性 】 面 板 中 为 什么 只 显示 了 其 标题 栏 ? 


之 所 以 会 出 现 这 种 情况 ， 主 要 是 由 于 属性 检查 器 被 折 车 起 来 了 。Adobe Dreamweaver CS6 
为 了 节省 屏幕 空间 为 各 个 面板 组 都 设计 了 折 车 功能 ， 单 击 该 面板 组 的 标题 名 称 ， 即 可 在 “ 展 
开 / 折 车 ”状态 之 间 进 行 切换 。 同 时 对 于 不 用 的 面板 组 还 可 以 将 其 暂时 关闭 ， 需 要 使 用 时 再 通 
过 【窗口 】 菜 单 将 其 打开 。 
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4.1 文档 的 基本 操作 


使 用 Dreamweaver CS6 可 对 网 站 的 网 页 进行 编辑 。 该 软件 为 创建 Web 文档 提供 了 灵活 的 
编辑 环境 。 


4.1.1 案例 1 一 一 创建 空白 文档 


NN 制作 网 页 的 第 一 步 就 是 创建 空白 文档 ， 使 用 Dreamweaver CS6 创建 空白 文档 的 具体 操作 
步骤 如 下 。 


EEC 选择 【文件 】 一 【新 建 】 菜 单 命令 。 打 开 【 新 建文 档 】 对 话 框 ， 并 选择 其 左 侧 
的 【空白 页 】 选 项 ， 在 【页 面 类 型 】 列 表 框 中 选择 HTML 选项 ， 在 【布局 】 列 表 框 
中 选择 “无 ”选项 ， 如 图 4-1 所 示 。 


[NO 


图 4-1 【新 建文 档 】 对 话 框 图 4-2 创建 空白 文档 


4.1.2 ”案例 2 一 一 设置 页 面 属性 


创建 空白 文档 后 ， 接 下 来 需要 对 文件 的 页 面 属性 进行 设置 ， 也 就 是 设置 整个 网 站 页 面 的 
外 观 效果 。 选 择 【 修 改 】 一 【页 面 属性 】 菜 单 命令 ， 如 图 4-3 所 示 。 或 按 Ctrl+J 组 合 键 ， 打 
开 【 页 面 属性 】 对 话 框 ， 从 中 可 以 设置 外 观 、 链 接 、 标 题 、 标 题 /编码 和 跟踪 图 像 等 属性 。 下 
面 分 别 介 绍 如 何 设 置 页 面 的 外 观 、 链 接 、 标 题 等 属性 。 


1. 设置 外 观 


在 【页 面 属性 】 对 话 框 的 【分 类 】 列 表 框 中 选择 【外 观 】 选 项 ， 可 以 设置 CSS 外 观 和 
HTML 外 观 。 外 观 的 设置 可 以 从 页 面 字体 、 文 字 大 小 、 文 本 颜色 等 方面 进行 ， 如 图 4-4 
所 示 。 
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图 4-3 选择 【页 面 属性 】 菜 单 命令 
(D 设置 页 面 字体 。 
在 【页 面 字体 】 下 拉 列 表 中 可 以 设置 文本 的 字体 样式 。 比 如 这 里 选择 一 种 字体 样式 


图 4-4 【页 面 属性 】 对 话 框 


后 单 击 【应 用 】 按 钮 ， 页 面 中 的 字体 即 可 显示 为 这 种 字体 样式 ， 如 图 4-5 所 示 。 


分 类 Sm Css) 
页 面 字体 四) 加 Consclas, hndsle 


生活 是 一 首 歌 ， 一 首 五 你 给 扮 的 歌 ， 一 首 低沉 而 又 高 下 的 歌 ， 一 首 令 人 无 法 捉 
六 的 歌 。 生 活 中 的 驴 难 困苦 就 是 著 一 个 个 跳动 的 音符 ， 由 于 这 些 音符 的 加 入 才 
使 生活 交 得 更 加 美妙 


图 4-5 设置 页 面 字体 
(2) 设置 字号 大 小 。 
在 【大 小 】 下 拉 列 表 中 可 以 设置 文本 的 字号 大 小 ， 这 里 选择 36， 在 右 侧 的 单位 下 拉 列 表 
中 选择 px 单位 ， 单 击 【 应 用 】 按 钮 ， 页 面 中 的 文本 字号 即 可 显示 为 36px 大 小 ， 如 图 4-6 所 示 。 
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EE Emo | 使 生活 变 得 更 加 美妙 。 
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图 4-6 设置 页 面 字号 的 大 小 
(3) 设置 文本 颜色 。 


在 【文本 颜色 】 文 本 框 中 输入 显示 文本 颜色 的 十 六 进 制 值 ， 或 者 单 击 文 本 框 左 侧 的 【 选 
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择 颅 色 】 按 钮 号 ， 即 可 在 弹出 的 颜色 选择 器 中 为 文本 选择 颜色 。 单 击 【 应 用 】 按 钮 ， 即 可 看 
到 页 面 文本 呈现 为 选中 的 颜色 ， 如 图 4-7 所 示 。 


人 SH css) 


MS ei 
EE A: 
EM 


EIT CR Ca ) CBA 


图 4-7 设置 页 面 文 本 的 颜色 
(4) 设置 背景 颜色 。 


在 【背景 颜色 】 文 本 框 中 设置 背景 颜色 ， 这 里 输入 墨绿 色 的 十 六 进 制 值 %9F， 完 成 后 单 
击 【 应 用 】 按 钮 ， 即 可 看 到 页 面 背景 呈现 出 所 输入 的 颜色 ， 如 图 4-8 所 示 。 
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图 4-8 设置 页 面 背景 颜色 
(5) 设置 背景 图 像 。 
在 该 文本 框 中 ， 可 直接 输入 网 页 背景 图 像 的 路 径 ， 或 者 单 击 文本 框 右 侧 的 [ 国 旧 由:] 按 
在 弹出 的 【选择 图 像 源 文件 】 对 话 框 中 选择 图 像 作 为 网 页 背景 图 像 ， 如 图 4-9 所 示 。 


完成 之 后 单 击 【确定 】 按 钮 返回 【页 面 属 性 】 对 话 框 ， 然 后 单 击 【 应 用 】 按 钮 ， 即 可 看 
到 页 面 显示 的 背景 图 像 ， 如 图 4-10 所 示 。 
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4-9 【选择 图 像 源 文 件 】 对 话 框 


4-10 设置 页 面 文本 的 背景 图 片 


(6) 设置 重复 方式 。 

【重复 】 选 项 用 来 可 选择 背景 图 像 在 网 页 中 的 重复 方式 ， 有 不 重复 、 重 复 、 横 向 重复 和 
纵向 重复 等 4 个 选项 。 比 如 选择 repeat-x( 横 向 重复 ) 选 项 ， 背 景 图 像 就 会 以 横向 重复 的 排列 方 
式 显 示 ， 如 图 4-11 所 示 。 

(7) 设置 页 边 距 。 

【左边 距 】、【 上 边 距 】、【 右 边 距 】 和 【下 边 距 】 选 项 用 于 设置 页 面 四 周边 距 的 大 
小 ， 如 图 4-12 所 示 。 
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图 4-11 设置 背景 图 像 的 排列 方式 图 4-12 设置 页 边 距 


Se 【背景 图 像 】 和 【背景 颜色 】 不 能 同时 显示 。 如 果 在 网 页 中 同时 设置 了 这 两 
个 选项 ， 则 在 浏览 网 页 时 只 显示 网 页 的 【背景 图 像 】. 


2. 设置 链接 

在 【页 面 属性 】 对 话 框 的 【分 类 】 列 表 框 中 选择 【链接 】 选 项 ， 可 设置 链接 的 属性 ， 如 
图 4-13 所 示 。 

3. 设置 标题 

在 【页 面 属性 】 对 话 框 的 【分 类 】 列 表 框 中 选择 【标题 】 选 项 ， 可 设置 标题 的 属性 ， 如 
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图 4-13 设置 页 面 的 链接 图 4-14 设置 页 面 的 标题 


4. 设置 标题 /编码 
在 【页 面 属性 】 对 话 框 的 【分 类 】 列 表 框 中 选择 【标题 /编码 】 选 项 ， 可 以 设置 标题 /编码 
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的 属性 。 比 如 网 页 的 标题 、 文 档 类 型 和 网 页 中 文本 的 编码 ， 如 图 4-15 所 示 。 
5. 设置 跟踪 图 像 


在 【页 面 属性 】 对 话 框 的 【分 类 】 列 表 框 中 选择 【跟踪 图 像 】 选 项 ， 可 设置 跟踪 图 像 的 
属性 ， 如 图 4-16 所 示 。 
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图 4-15 设置 标题 /编码 图 4-16 设置 跟踪 图 像 


(1) 设置 跟踪 图 像 。 

【跟踪 图 像 】 选 项 用 于 设置 作为 网 页 跟踪 图 像 的 文件 路 径 。 通 过 单 击 文本 框 右 侧 的 浏览 
按钮 攻 葛 oj]， 也 可 以 在 弹出 的 对 话 框 中 选择 图 像 作为 跟踪 图 像 ， 如 图 4-17 所 示 。 

跟踪 图 像 是 Dreamweaver 中 非常 有 用 的 功能 。 使 用 这 个 功能 时 ， 需 先 用 平面 设计 工具 设 
计 出 页 面 的 平面 版 式 ， 再 以 跟踪 图 像 的 方式 将 其 导入 到 页 面 中 ， 这 样 用 户 在 编辑 网 页 时 就 可 
以 精确 地 定位 页 面 元 素 。 

(2) 设置 透明 度 。 

拖 动 滑 块 ， 可 以 调整 图 像 的 透明 度 ， 透 明度 越 高 ， 图 像 越 清晰 ， 如 图 4-18 所 示 。 
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图 4-17 添加 图 像 文件 图 4-18 设置 图 像 的 透明 度 


使 用 了 【跟踪 图 像 〗 后 ， 原 来 的 背景 图 像 则 不 会 显示 。 但 是 在 IE 浏览 器 中 预 
i 览 时 ， 则 会 显示 出 页 面 的 真实 效果 ， 而 不 会 显示 跟踪 图 像 的 效果 。 


4.2 用 文字 美化 网 页 


所 谓 设 置 文本 属性 ， 主 要 是 对 网 页 中 的 文本 格式 进行 编辑 和 设置 ， 包 括 文本 字体 、 文 本 
颜色 和 字体 样式 等 。 


令 m 


4.2.1 案例 3 一 一 插入 文字 


文字 是 基本 的 信息 载体 ， 是 网 页 中 最 基本 的 元 素 之 一 。 在 网 页 中 运用 丰富 的 字体 、 多 样 
的 格式 以 及 赏心悦目 的 文字 效果 ， 是 网 站 设计 师 必 不 可 少 的 技能 。 

在 网 页 中 插入 文字 的 具体 操作 步骤 如 下 。 

EC 选择 【文件 】 一 【打开 】 菜 单 命 令 ， 弹 出 【打开 】 对 话 框 ， 在 【查找 范围 】 下 
拉 列 表 中 定义 打开 文件 的 位 置 为 “ch04\ 插 入 文本 .html”， 然 后 单 击 【 打 开 】 按 钮 ， 
如 图 4-19 所 示 。 

EEC) 打开 随 书 光 盘 中 的 素材 文件 ， 然 后 将 光标 放置 在 文档 的 编辑 区 ， 如 图 4-20 
所 示 。 
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图 4-19 【打开 】 对 话 框 图 4-20 打开 的 素材 文件 


EEIB) 输入 文字 ， 如 图 4-21 所 示 。 
EEC 选择 【文件 】 一 【另存 为 】 菜 单 命令 ,将 文件 保存 为 “ch04\ 插 入 文本 
后 .html”， 按 F12 键 在 浏览 器 中 预览 效果 ， 如 图 4-22 所 示 。 


图 4-21 输入 文字 图 4-22 预览 网 页 效果 


5 到 | 在 输入 文本 的 过 程 中 ， 换 行 时 如 果 直 接 按 Enter 键 ， 生 成 的 行 间距 就 会 比较 
大 。 一 般 情况 下 ， 在 网 页 中 换行 时 需要 按 ShiftHEnter 组 合 键 ， 才 能 得 到 正常 的 行距 。 
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通过 在 文档 中 添加 换行 符 来 实现 文本 换行 ， 有 以 下 两 种 操作 方法 。 
(1) 选择 【窗口 】 一 【插入 】 菜 单 命令 ,打开 【插入 】 面 板 ， 然 后 单 击 【 文 本 】 选 项 卡 
中 的 【字符 】 图 示 ， 在 弹出 的 列表 中 选择 【换行 符 】 选 项 ， 如 图 4-23 所 示 。 

(2) 选择 【插入 】 一 HIMIL 一 【特殊 字符 】 一 【换行 符 】 菜 单 命令 ， 如 图 4-24 所 示 。 
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图 4-23 选择 【换行 符 】 选 项 图 4-24 选择 【换行 符 】 菜 单 命令 


4.2.2 ”案例 4 一 一 设置 字体 


插入 网 页 文字 后 ， 用 户 可 以 根据 自己 的 需要 对 插入 的 文字 进行 设置 ， 包 括 字体 样式 、 字 
体 大 小 、 字 体 颜 色 等 。 


1. 设置 字体 
对 网 页 中 的 文本 进行 字体 设置 的 具体 步骤 如 下 。 
EE 打开 随 书 光盘 中 的 “ch04\ 插 入 文本 后 .html” 文 件 。 在 文档 窗口 中 ， 选 中 要 设置 


字体 的 文本 ， 如 图 4-25 所 示 。 
ECEIDy 在 下 方 的 【属性 】 面 板 中 ， 在 【字体 】 下 拉 列 表 中 选择 字体 ， 如 图 4-26 所 示 。 
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图 4-25 选中 文本 图 4-26 选择 字体 


ES 选中 的 文本 即 可 变 为 所 选 字体 。 

2. 无 字体 提示 时 的 解决 方法 

(1) 如 果 字 体 列 表 中 没有 需要 的 字体 ， 可 按照 以 下 步骤 编辑 字体 列表 。 

ED 在 【属性 】 面 板 的 【字体 】 下 拉 列 表 中 选择 【编辑 字体 列表 】 选 项 ， 打 开 【 编 


辑 字体 列表 】 对 话 框 ， 如 图 4-27 所 示 。 
国 了 PY 在 【可 用 字体 】 列 表 框 中 选择 要 使 用 的 字体 ， 然 后 单 击 添加 按钮 国 ， 所 选 字体 


就 会 出 现在 左 侧 的 【选择 的 字体 】 列 表 框 中 ， 如 图 4-28 所 示 。 


图 4-27 打开 【编辑 字体 列表 】 对 话 框 4-28 ”选择 需要 添加 的 字体 样式 


Se 【选择 的 字体 〗 列 表 框 显示 的 是 当前 选 定 字体 列表 项 中 包含 的 字体 名 称 ， 
SS 【可 用 字体 】 列 表 框 显示 的 是 当前 所 有 可 用 的 字体 名 称 。 


(2) 如 果 要 创建 新 的 字体 列表 ， 可 以 从 列表 框 中 选择 【( 在 以 下 列表 中 添加 字体 )】 选 项 。 
如 果 没 有 出 现 该 选项 ， 可 以 单 击 对 话 框 左上 角 的 添加 四 按钮 ， 如 图 4-29 所 示 。 

(3) 如 果 要 从 字体 组 合 项 中 删除 字体 ， 可 以 从 【字体 列表 】 列 表 框 中 选 定 该 字体 组 合 
项 ， 然 后 单 击 列表 框 左上 角 的 删除 按钮 局 ， 设 置 完成 单 击 【确定 】 按 钮 即 可 ， 如 图 4-30 所 示 。 


二 革 列表 [IS] 
Luci, ns Unicods, Lucids Grande, sans-serif 人 
有 5 Serif, New York, serif 

oes dn conside, oneeo, monospuee 


i da Suns Unicode, Lucida Grande, sans-serif 
NS Serif, Now York, serif 
Luacida Consol, ,monos 

ie 


图 4-29 添加 选择 的 字体 图 4-30 ”删除 选择 的 字体 
mm 一 般 来 说 ， 应 尽量 在 网 页 中 使 用 宋体 或 黑体 ， 不 使 用 特殊 的 字体 ， 因 为 浏览 


人” 网 页 的 计算 机 中 如 果 没有 安装 这 些 特殊 的 字体 ， 在 浏览 时 就 只 能 以 系统 默认 的 字 
体 来 显示 。 对 于 中 文 网 页 来 说 ， 应 该 尽量 使 用 宋体 或 黑体 ， 因 为 大 多 数 的 计算 机 


中 系统 都 默认 装 有 这 两 种 字体 。 
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4.2.3 ”案例 5 一 一 设置 字号 


字号 是 指 字 体 的 大 小 。 在 Dreamweaver CS6 中 设置 文字 字号 的 具体 步骤 如 下 。 
ED 打开 随 书 光盘 中 的 “ch04\ 插 入 文本 后 .html” 文 件 ， 选 定 要 设置 字号 的 文本 ， 如 
图 4-31 所 示 。 
NS 图 4-31 选择 需要 设置 字号 的 文本 
NS ECEJPps 在 【属性 】 面 板 的 【大 小 】 下 拉 列 表 中 选择 字号 。 这 里 选择 18， 如 图 4-32 
所 示 。 
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图 4-32 【属性 】 面板 
区 BY 选中 的 文本 字体 大 小 将 更 改 为 18， 如 图 4-33 Pie 


图 4-33 设置 字号 后 的 文本 显示 效果 


5 天 如 果 要 设置 字符 相对 默认 字符 大 小 的 增 减 量 ， 可 以 在 同一 个 下 拉 列 表 中 选择 
以 XxX-small、xx-large 或 smaller 等 选项 。 如 果 要 取消 对 字号 的 设置 ， 选 择 【无 】 选 
项 即 可 。 


4.2.4 案例 6 一 一 设置 字体 颜色 


多 彩 的 字体 颜色 会 增强 网 页 的 表现 力 。 在 Dreamweaver CS6 中 ， 设 置 字体 颜色 的 具体 步 
又 如 下 。 


EEJDp 打开 随 书 光盘 中 的 “ch04\ 设 置 文本 属性 .html” 文 件 ， 选 中 要 设置 字体 颜色 的 文 
本 ， 如 图 4-34 所 示 。 

EDp 在 【属性 】 面 板 上 单 击 【 文 本 颜色 】 按钮 图 ， 打开 Dreamweaver CS6 颜色 板 ， 
从 中 选择 需要 的 颜色 ， 也 可 以 直接 在 该 按钮 右边 的 文本 框 中 输入 颜色 的 十 六 进 制 数 
值 ， 如 图 4-35 所 示 。 


图 4-34 选中 文本 图 4-35 设置 文本 颜色 


| 设置 颜色 也 可 以 选择 【格式 〗】 一 【颜色 】 菜 单 命令 ， 在 弹出 的 【颜色 】〗 对 话 
慌 。 框 中 ， 选 择 需要 的 颜色 ， 然 后 单 击 【 确 定 】 按 钮 即 可 ， 如 图 4-36 所 示 。 


ETE> 选 定 颜色 后 ， 被 选中 的 文本 将 更 改 为 选 定 的 颜色 ， 如 图 4-37 所 示 。 
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图 4-36 【颜色 】 文本 框 4-37 设置 的 文本 颜色 


4.2.5 ”案例 7 一 一 设置 字体 样式 
字体 样式 是 指 字体 的 外 观 显示 样式 ， 比 如 字体 的 加 粗 、 倾 斜 、 加 下 划 线 等 。 利 用 


如 潍 认 熙 


亲 N 世 了 导 喇 习 一 一 济 习 全 | 洲 
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Dreamweaver CS6 可 以 设置 多 种 字体 样式 ， 具 体 的 操作 步骤 如 下 。 
EC 选 定 要 设置 字体 样式 的 文本 ， 如 图 4-38 所 示 。 
EEIPp 选择 【格式 】 一 【样式 】 菜 单 命令 ， 弹 出 子 菜单 ， 如 图 4-39 所 示 。 
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图 4-38 选中 文本 图 4-39 设置 文本 样式 


子 命令 各 选项 含义 如 下 。 

。 粗 体 : 从 子 菜单 中 选择 【 粗 体 】 命 令 ， 可 将 选中 的 文字 加 粗 显 示 ， 如 图 4-40 所 示 。 

ee 斜体 : 从 子 菜单 中 选择 【和 斜体】 命令 ， 可 将 选中 的 文字 显示 为 斜体 样式 ， 如 图 4-41 
所 示 。 


铀 禾 日 当 午 铠 禾 日 当 午 
汗 滴 禾 下 土 | 汪 洲 天 下 亏 | 


图 4-40 设置 文字 为 粗 体 图 4-41 设置 文字 为 斜体 


@ 下划线: 从 子 菜单 中 选择 【下 划 线 】 命 令 ， 可 在 选中 的 文字 下 方 显示 一 条 下 划 线 ， 
如 图 4-42 所 示 。 


Sn 利用 【属性 】〗 面 板 也 可 以 设置 字体 的 样式 。 选 中 文本 后 ， 单 击 【 属 性 】 面 板 
SS。 上 的 国 按 钮 可 加 粗 字 体 ， 单 击 芝 : 按 钮 可 使 文本 变 为 斜体 样式 ， 如 图 4-43 所 示 。 
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图 4-42 ”给 文字 添加 下 划 线 4-43 ”属性 面板 
Sm 按 CtrlHB 组 合 键 ， 可 以 使 选中 的 文本 加 粗 ; 按 CtrlHI 组 合 键 ， 可 以 使 选中 的 


SN 文本 倾斜。 


e 删除 线 : 如 果 从 【格式 】 一 【样式 】 子 菜单 中 选择 【删除 线 】 命 令 ， 就 会 在 选中 的 
文字 的 中 部 出 现 一 条 横贯 的 横 线 ， 表 明文 字 已 被 删除 ， 如 图 4-44 所 示 。 

ee 打字 型 : 如 果 从 【格式 】 一 【样式 】 子 菜单 中 选择 【打字 型 】 命 令 ， 就 可 以 将 选中 
的 文本 作为 等 宽度 文本 来 显示 ， 如 图 4-45 所 示 。 
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图 4-44 添加 文字 删除 线 图 4-45 设置 字体 的 打字 效果 


| 
Xe 所 谓 等 宽度 文本 ， 是 指 每 个 字符 或 字母 的 宽度 相同 。 


e@ 强调 : 如 果 从 【格式 】 一 【样式 】 子 菜单 中 选择 【强调 】 命 令 ， 则 表明 选中 的 文字 
需要 在 文件 中 被 强调 。 大 多 数 浏 览 器 会 把 它 显示 为 斜体 样式 ， 如 图 4-46 所 示 。 

@ ”加 强 : 如 果 从 【格式 】 一 【样式 】 子 菜单 中 选择 【加 强 】 命 令 ， 则 表明 选 定 的 文字 
需要 在 文件 中 以 加 强 的 格式 显示 。 大 多 数 浏览 器 会 把 它 显 示 为 粗 体 样式 ， 如 图 4-47 
所 示 。 
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图 4-46 添加 文字 强调 效果 图 4-47 ”加强 文字 效果 


4.2.6 ”案例 8 一 一 编辑 段落 

段落 指 的 是 一 段 格式 上 统一 的 文本 。 在 文件 窗口 中 每 输入 一 段 文字 ， 按 Enter 键 后 ， 就 会 
生成 一 个 段落 。 编 辑 段落 主要 是 对 网 页 中 的 一 段 文本 进行 设置 。 

1. 设置 段落 格式 

使 用 【属性 】 面 板 中 的 【格式 】 下 拉 列 表 ， 或 选择 【格式 】-、【 段 落 格式 】 菜 单 命令 
都 可 以 设置 段落 格式 。 其 操作 步骤 如 下 。 

ET 将 光标 放置 在 段落 中 任意 一 个 位 置 ， 或 选中 段落 中 的 一 些 文本 ， 如 图 4-48 所 示 。 

TY 选择 【格式 】 一 【段落 格式 】 子 菜单 中 的 命令 ， 如 图 4-49 所 示 。 
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画 unuted-t | 


[ead ENC EE 
图 4-48 选中 段落 图 4-49 选择 段落 格式 
| 
A 在 【属性 】 面 板 的 【格式 〗】 下 拉 列 表 中 选择 任 一 选项 ， 如 图 4-51 所 示 。 
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图 4-51 【属性 】 面 板 


区 于 BY 选择 一 个 段落 格式 (比如 【标题 1】)， 然 后 单 击 【 拆 分 】 按 钮 ， 在 代码 视图 下 可 
以 看 到 与 所 选 格式 关联 的 HTML 标记 (比如 表示 【标题 1】 的 hl1、 表 示 【 预先 格式 
化 的 】 文 本 的 pre 等 ) 将 应 用 于 整个 段落 ， 如 图 4-52 所 示 。 

ES 在 段落 格式 中 对 段落 应 用 标题 标记 时 ，Dreamweaver 会 自动 地 添加 下 一 行文 本 
作为 标准 段落 ， 如 图 4-53 所 示 。 


“| 要 是 对 网 页 中 的 二 段 
文本 进行 设置 。 
使 用 [属性 ] 面 板 中 的 
[格式 ] 下 拉 列 表 , 或 
选择 【格式 】--【 段 


格式】 菜单 命令 ， 都 五 
以 设置 段 沙 格式 。 


Ex 


PE 


图 4-52 ”查看 段落 代码 图 4-53 添加 段落 标记 


Sn 若 要 更 改 已 设置 的 段落 标记 ， 可 以 选择 【编辑 】 一 【首选 参数 】 菜 单 命令 ， 
汇 弹出 【首选 项 】 对 话 框 ， 然 后 在 【常规 】〗】 分 类 中 的 【编辑 选项 〗】 区 域 中 ， 撤 选 
【标题 后 切换 到 普通 段落 〗 复 选 框 即 可 ， 如 图 4-54 所 示 。 


2. 定义 预 格式 化 


在 Dreamweaver 中 ， 不 能 连续 地 输入 多 个 空格 。 在 显示 一 些 特殊 格式 的 段落 文本 (比如 诗 
歌 ) 时 ， 这 一 点 就 会 显得 非常 不 便 ， 如 图 4-55 所 示 。 


”| 请 8 时节 两 纷纷 
踏 上 行人 区 新 缠 
Eee 
Eo NN 
图 4-54 【首选 项 】 对 话 框 图 4-55 输入 空格 后 的 段落 显示 效果 NN 
在 这 种 情况 下 ， 可 以 使 用 预 格式 化 标签 <p> 和 </p> 解 决 该 问题 。 


en 预 格式 化 指 的 是 预先 对 <p> 和 </p> 之 间 的 文字 进行 格式 化 ， 这 样 ， 浏 览 器 在 
SN 。 显示 其 中 的 内 容 时 ， 就 会 完全 按照 真正 的 文本 格式 来 显示 ， 即 原封 不 动 地 保留 文 
档 中 的 空白 ， 比 如 空格 及 制 表 符 等 ， 如 图 4-56 所 示 。 


图 4-56 预 格 式 化 的 文字 


在 Dreamweaver 中 ， 设 置 预 格式 化 段落 的 具体 步骤 如 下 。 

ED 将 光标 放置 在 要 设置 预 格式 化 的 段落 中 ， 如 图 4-57 所 示 。 

区 于 按 Ctrl+F3 组 合 键 打开 【属性 】 面 板 ， 在 【格式 】 下 拉 列 表 中 选择 【预先 格式 化 
的 】 选 项 ， 如 图 4-58 所 示 。 


LE | 
se 如 果 要 将 多 个 段落 设置 为 预 格式 化 ， 则 可 同时 选中 多 个 段落 ， 如 图 4-59 所 示 。 


a® 
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和 和 本 员 局 区 上 付 一 的 六 二 - 
人 
主人 和 主人 
重用 【 届 住 】 画 中 的 相交 】 下 村 刘表 。 要 
【合式 】 -<【 恨 窜 司 式 ] 车 全 ， 部 可 


图 4-57 ”选择 需要 预 格式 化 的 段落 图 4-58 选择 【预先 格式 化 的 】 选 项 


| 选择 【格式 〗 一 【段落 格式 〗 一 【已 编排 格式 的 】〗 菜 单 命令 ， 也 可 以 实现 段 


ee 落 的 预 格 式 化 ， 如 图 4-60 所 示 。 


SO(O sl5) OIW) 和 RH 
Er 
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图 4-59 选中 多 个 段落 图 4-60 选择 段落 格式 菜单 


多 > 该 操作 会 自动 地 在 相应 段落 的 两 端 添加 <pre> 和 </pre> 标 记 。 如 果 原 来 段落 的 
敬 。 两 端 有 <p> 和 </p> 标 记 ， 则 会 分 别 用 <pre> 和 </pre> 标 记 将 其 替换 ， 如 图 4-61 所 示 。 


由 于 预 格式 化 文本 不 能 自动 换行 ， 因 此 除非 绝对 需要 ， 否 则 尽量 不 要 使 用 预 


Se 
A 格式 化 功能 。 


国 于 BY 如 果 要 在 段 首 空 出 两 个 空格 ， 不 能 直接 在 【设计 视图 】 方式 下 输入 空格 ,1 


切换 到 【代码 视图 】 中 ， 在 自首 文字 之 前 输入 代码 “&nbsp;”， 如 图 4-62 所 示 。 


EE 
导 Ea 
a 设置 段落 格式 可 
国 
四 ES 
| E 加 
全 tt ipx; > 设 需 淹 消 格式 </p> 
出 bd 一 的 文本 ,在 文件 语 口中 
[9 语 动 地 形成 一 个 自贡 - 扒 亲 自贡 主机 
外 可 
入 三 
让 
下 豆 
# | 
| 
“ 间 则 二 | -9 
Ee EI EE > 


图 4-61 添加 段落 标记 <pre> 图 4-62 在 代码 视图 中 输入 空格 代码 


EEC 该 代码 只 表示 一 个 半角 字符 ， 要 空 出 两 个 汉字 的 位 置 ， 需 要 添加 4 个 代码 。 这 
样 ， 在 浏览 器 中 就 可 以 看 到 段 首 已 经 空 两 个 格 了 ， 如 图 4-63 所 示 。 


设置 段落 格式 


2 在 文件 杏 口 中 志和 输 入 一 段 | 
| 人 动 地 形成 一 个 段落 。 编 务 段 清 主要 


文字 ， 按 [[ 
i | 
使 用 【属性 】 4 TS Dt ei 【格式 】 
六 【 眉 祖 格式 】 茶 单 命令 ， 者 可 以 识 置 段落 格 : "| 


图 4-63 设置 段落 首 行 缩 进 格式 
3. 设置 段落 的 对 齐 方式 


段落 的 对 齐 方式 指 的 是 段落 相对 文件 窗口 (或 浏览 器 窗口 ) 在 水 平 位 置 的 对 齐 方式 ， 有 4 种 
对 齐 方式 ， 左 对 齐 、 居 中 对 齐 、 右 对 齐 和 两 端 对 齐 。 

对 齐 段落 的 具体 步骤 如 下 。 

ET 将 光标 放置 在 要 设置 对 齐 方式 的 段落 中 。 如 果 要 设置 多 个 段落 的 对 齐 方式 ， 则 

选择 多 个 段落 ， 如 图 4-64 所 示 。 

ET 进行 下 列 操作 之 一 。 

(GD 选择 【格式 】--【 对 齐 】 菜 单 命令 ， 然 后 从 子 菜单 中 选择 相应 的 对 齐 方式 ， 如 图 4-65 
所 示 。 
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下拉 列表 ， 或 选择 【 阁 式 】 
一 【段落 格式 】 菜 单 命令 ， a 


二 开山 Ctrl+Alt+Shilt+L 
ES Ctrl+Alt+Shif+C 

Ctrl+Alt+Shif+R 
Ctrl+Alt+ Shift+) 


es 
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图 4-64 选择 多 个 段落 图 4-65 选择 段落 的 对 齐 方式 
(2) 单 击 【属性 】 面 板 中 的 对 齐 按钮 ， 如 图 4-66 所 示 。 
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图 4-66 【属性 】 面 板 
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可 供 选择 的 按钮 有 4 个 ， 其 含义 如 下 。 
e@ 【 左 对 齐 】 按 钮 一 : 单 击 该 按钮 ， 可 以 设置 段落 相对 文档 窗口 向 左 对 齐 ， 如 图 4-67 


所 示 。 
@ 【居中 对 齐 】 按 钮 重 |: 单 击 该 按钮 ， 可 以 设置 段落 相对 文档 窗口 居中 对 齐 ， 如 图 4-68 
所 示 。 
风 waeer -ox 国 wnauea BEE 
设置 段落 格式 | 设置 段落 格式 i 
段落 指 的 是 一 段 格式 上 统一 的 文本 。 在 文件 窗口 中 每 输入 一 段 是 人 人 要 
文字 ， 按 【Enter】 键 后 ， 就 会 自动 地 形成 一 个 段落 。 编辑 段落 主要 文字 , 按 【Et 成 
ey 式 使 用 属性] sa [格式 】 
A Ey 人 Li E 【段落 格式 】 菜单 命令 ， 部 可 以 设置 段落 格式 。 
<body> 下 司 画 40 :314v ~ oar) Gon) 国 男 480 x 34v 3 
4-67 ”段落 向 左 对 齐 图 4-68 段落 居中 对 齐 
e@ 。 【 右 对 齐 】 按 钮 图 单 击 该 按钮 ， 可 以 设置 段落 相对 文档 窗口 向 右 对 齐 ， 如 图 4-69 
所 示 。 


e 【两 端 对 齐 】 按 钮 图 单 击 该 按钮 ， 可 以 设置 段落 相对 文档 窗口 向 两 端 对 齐 ， 如 
图 4-70 所 示 。 
夯 unaed SE -Ox 
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段落 指 的 是 一 段 格式 上 统一 的 文本 。 在 文件 窗口 中 每 输入 一 段 
文字 ， 按 【Enter] 键 后 ， 就 会 自动 地 形成 一 个 段落 。 编 辑 段落 主要 
是 对 网 页 中 的 一 段 文本 进行 设置 。 
使 用 【属性 】 面板 中 的 【格式 】 下 拉 列 表 ， 或 选择 【格式 】 
说 【段落 格式 】 荣 单 命令 ， 都 可 以 设置 段落 格式 。 | 


aa | lp 0 


图 4-69 ”段落 向 右 对 齐 图 4-70 段落 向 两 端 对 齐 


4. 设置 段落 缩 进 
在 强调 一 段 文字 或 引用 其 他 来 源 的 文字 时 ， 需 要 对 文字 进行 段落 缩 进 ， 以 表示 和 普通 段 
落 有 区 别 。 缩 进 主要 是 指 内 容 相 对 于 文档 窗口 (或 浏览 器 窗口 ) 左 端 产 生 的 间距 。 
实现 段落 缩 进 的 具体 步骤 如 下 。 
ECTD 将 光标 放置 在 要 设置 缩 进 的 段落 中 。 如 果 要 缩 进 多 个 段落 ， 则 选中 多 个 段落 ， 
如 图 4-71 所 示 。 


EECJDp 选择 【格式 】 一 【 缩 进 】 菜 单 命 令 ， 即 可 将 当前 段落 往 右 缩 进 一 段 位 置 ， 如 
图 4-72 所 示 。 
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设置 段落 格 


文本 。 在 - 


和 TT PT amy 下 同 画 ozsitv 
图 4-71 选中 段落 4-72 段落 缩 进 


单 击 【 属 性 】 面 板 中 的 【删除 内 缩 区 块 】 按 钮 蕴 和 【内 缩 区 块 】 按 钮 图 ， 即 可 实现 当前 
段落 的 凸 出 和 缩 进 。 凸 出 是 将 当前 段落 向 左 恢复 一 段 缩 进位 置 。 
2 按 Ctrl + Alt+ ] 组 合 键 可 以 进行 一 次 右 缩 进 ， 按 Ctrl + Alt+ [组合 键 可 以 向 左 
SS 。 恢复 一 段 缩 进位 置 。 


4.2.7 ”案例 9 一 一 检查 拼写 


如 果 要 对 英文 材料 进行 检查 更 正 ， 可 以 使 用 Dreamweaver CS6 中 的 检查 拼写 功能 。 具 体 
的 操作 步骤 如 下 。 
EC 选择 【命令 】 一 【检查 拼写 】 菜 单 命令 ， 如 图 4-73 所 示 ， 可 以 检查 当前 文档 中 
的 拼写 。【 检 查 拼写 】 命 令 会 忽略 HTML 标记 和 属性 值 。 
EEJDp 默认 情况 下 ， 拼 写 检查 器 使 用 美国 英语 拼写 字典 。 要 更 改 字 典 ， 可 以 选择 【 编 
辑 】 一 【首先 参数】 菜单 命令 。 在 弹出 的 【首选 项 】 对 话 框 中 选择 【常规 】 分 类 ， 
在 【拼写 字典 】 下 拉 列 表 中 选择 要 使 用 的 字典 ， 然 后 单 击 【确定 】 按 钮 即 可 ， 如 
图 4-74 所 示 。 
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图 4-73 选择 【检查 拼写 】 菜 单 命令 图 4-74 【首选 项 】 对 话 框 
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ES) 选择 检查 拼写 菜单 命令 后 ， 如 果 文 本 内 容 有 误 ， 系 统 就 会 弹出 【检查 拼写 】 对 
话 框 ， 如 图 4-75 所 示 。 

EC) 在 使 用 【检查 拼写 】 功 能 时 ， 如 果 单词 的 拼写 没有 错误 ， 则 会 弹出 如 图 4-76 所 
示 的 提示 框 。 

臣 了 BY 单 击 【 是 】 按 钮 ， 弹 出 信息 提示 框 ， 然 后 单 击 【 确 定 】 按 钮 ， 关 闭 提示 框 即 
可 ， 如 图 4-77 所 示 。 


图 4-75 【检查 拼写 】 对 话 框 图 4-76 ”信息 提示 框 图 4-77 信息 提示 框 
4.2.8 ”案例 10 一 一 创建 项 目 列表 


N 列表 就 是 那些 具有 相同 属性 元 素 的 集合 。Dreamweaver CS 中 常用 的 列表 有 无 序列 表 和 有 
序列 表 两 种 。 无 序列 表 使 用 项 目 符号 来 标记 无 序 的 项 目 ， 有 序列 表 使 用 编号 来 记录 项 目的 
顺序 。 

1. 无 序列 表 


在 无 序列 表 中 ， 各 个 列表 项 之 间 没有 顺序 级 别 之 分 ， 通 常 使 用 一 个 项 目 符号 作为 每 个 列 
表 项 的 前 级 。 

设置 无 序列 表 的 具体 步骤 如 下 。 

ECEDD 将 光标 放置 在 需要 设置 无 序列 表 的 文档 中 ， 如 图 4-78 所 示 。 

EEC 选择 【格式 】 一 【列表 】 一 【项 目 列表 】 菜 单 命令 ， 如 图 4-79 所 示 。 
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图 4-78 设置 无 序列 表 图 4-79 ”选择 【项 目 列表 】 菜单 命 令 


ES 光标 所 在 的 位 置 将 出 现 默认 的 项 目 符号 ， 如 图 4-80 所 示 。 
重复 以 上 步骤 ， 设 置 其 他 文本 的 项 目 符号 ， 如 图 4-81 所 示 。 
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图 4-80 ”添加 无 序 的 项 目 符 4-81 带 有 项 目 符号 的 无 序列 表 


2. 有 序列 表 


对 于 有 序 编号 ， 可 以 指定 其 编号 类 型 和 起 始 编号 。 其 编号 可 以 采用 阿拉 伯 数 字 、 大 写字 
母 或 罗马 数字 等 。 

设置 有 序列 表 的 具体 步骤 如 下 。 

ED 将 光标 放置 在 需要 设置 有 序列 表 的 文档 中 ， 如 图 4-82 所 示 。 

EEC 选择 【格式 】 一 【列表 】 一 【编号 列表 】 菜 单 命令 ， 如 图 4-83 所 示 。 


图 4-82 设置 有 序列 表 图 4-83 选择 【编号 列表 】 菜 单 命令 


光标 所 在 的 位 置 将 出 现 编号 列表 ， 如 图 4-84 所 示 。 
ED 重复 以 上 步 又， 设置 其 他 文本 的 编号 列表 ， 如 图 4-85 所 示 。 
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图 4-84 设置 有 序列 表 图 4-85 有 序列 表 效果 


9 傅 
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列表 还 可 以 嵌 套 ， 媒 套 列 表 是 指 一 个 列表 中 还 包含 有 其 他 列表 的 列表 。 设 置 嵌 套 列表 的 
操作 步骤 如 下 。 
EEIDy 选中 要 区 套 的 列表 项 。 如 果 有 多 行文 本 需要 嵌 套 ， 则 需要 选中 多 行文 本 ， 如 图 4-86 
所 示 。 
EGRP9 单 击 【属性 】 面 板 中 的 【 缩 进 】 按 钮 铸 ， 选 择 【 格 式 】 一 【 缩 进 】 菜 单 命令 。 
如 图 4-87 所 示 。 
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图 4-86 ”列表 炭 套 效果 图 4-87 【属性 】 面 板 


5 加 在 【属性 】 面 板 中 直接 单 击 园 或 轩 按 钮 ， 可 以 将 选 定 的 文本 设置 成 项 目 (无 
站 序 ) 列 表 或 编号 有 序 ) 列 表 。 


4.3 ”用 图 像 美化 网 页 


无 论 是 个 人 网 站 还 是 企业 网 站 ， 图 文 并 茂 的 网 页 都 能 为 网 站 增色 不 少 。 用 图 像 美化 网 页 
会 使 网 页 变 得 更 加 美观 、 生 动 ， 从 而 吸引 更 多 的 浏览 者 。 


4.3.1 案例 11 一 一 插入 图 像 


网 页 中 通常 使 用 的 图 像 格 式 有 3 种 ， 即 GIF、JPEG 和 PNG。 其 具体 特性 如 下 。 

@ GIF 格式 : 网 页 中 最 常用 的 图 像 格式 ， 其 特点 是 图 像 文件 占用 磁盘 空间 小 ， 支 持 透 
明 背 景 和 动画 ， 多 数 用 于 图 标 、 按 钮 、 滚 动 条 和 背景 等 。 

e@ JPEG 格式 : 一 种 图 像 压 缩 格 式 ， 主 要 用 于 摄影 图 片 的 存储 和 显示 ， 文 件 的 扩展 名 
为 jpg 或 jpeg。 

e@ PNG 格式 : 汲取 了 GIF 格式 和 JPEG 格式 的 优点 ， 存 储 形式 丰富 ， 兼 有 GIF 格式 和 
JPEG 格式 的 色彩 模式 ， 采 用 无 损 压 缩 方 式 来 减 小 文件 的 大 小 。 

在 网 页 中 插入 图 像 的 具体 步骤 如 下 。 

ED 新 建 一 个 空白 文档 ， 如 图 4-88 所 示 。 

本 了 TB 将 光标 放置 在 要 插入 图 像 的 位 置 ， 在 【插入 】 面 板 的 【常用 】 选 项 卡 中 单 击 
【图 像 】 按 钮 融 ， 或 选择 【插入 】 一 【图 像 】 菜 单 命令 ， 如 图 4-89 所 示 。 
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图 4-88 新建 空 白文 档 图 4-89 【常用 】 面 板 


ECEIUBp 弹出 【选择 图 像 源 文件 】 对 话 框 ， 从 中 选中 要 插入 的 图 像 文件 ， 如 图 4-90 


所 示 。 
EEC 单 击 【确定 】 按 钮 ， 即 可 完成 向 文档 中 插入 图 像 的 操作 ， 如 图 4-91 所 示 。 
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图 4-90 【选择 图 像 源 文件 】 对 话 框 图 4-91 插入 图 像 


ET 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 效果 ， 如 图 4-92 所 示 。 
ET 在 括 入 图 像 等 对 象 时 ， 有 时 会 弹出 如 图 4.93 所 示 的 对 话 框 。 


个 EE 网 开设 计 与 由 沁 - 0 X | 等 无 和 到 x 栏 
文件 月 。 思 疆 (E) 至 看 (VI 必 吉 (A| 工具 (D) 可 动 (H) 
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部 时 在 插入 对 象 时 不 村 输入 此 信息 ， 洁 更 改 - 困 动 功 
自首 竺 全 各 。 
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图 4-92 ”网 页 预览 效果 图 4-93 【图 像 标签 辅助 功能 属性 】 对 话 框 


次 NN 遇 号 当 到 一 一 沼 到 疗 | 让 下 水 售 得 


Dreamweaver 动态 网 站 开发 
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如 果 不 希望 弹出 该 对 话 框 ， 则 可 以 选择 【编辑 】 一 【首选 参数 】 菜 单 命令 ， 打 开 【 首 选 
参数 】 对 话 框 ， 在 【分 类 】 列 表 框 中 选择 【辅助 功能 】 选 项 ， 然 后 在 【在 插入 时 显示 辅助 功 
能 属性 】 栏 下 撤 选 相应 对 象 的 复 选 框 即 可 ， 如 图 4-94 所 示 。 


mi 


同和 打开 时 全 点 丰 本 和 中 上 ) 
EDT 【全 友基 有 基 3 下 用 》 0) 


mm CR OC 
4-94 【首选 参数 】 对 话 框 
4.3.2 ”案例 12 一 一 图 像 属性 设置 


在 页 面 中 插入 图 像 后 单 击 选 中 图 像 ， 此 时 图 像 的 周围 会 出 现 边 框 ， 表 示 图 像 正 处 于 选中 
状态 ， 如 图 4-95 所 示 。 


图 4-95 选中 图 像 


在 【属性 】 面 板 中 可 设置 图 像 的 属性 。 比 如 设置 源 文件 、 输 入 蔡 换 文本 、 设 置 图 片 的 宽 
与 高 等 ， 如 图 4-96 所 示 。 


1. 【地 图 】 
该 属性 用 于 创建 客户 端 图 像 的 热 区 ， 在 其 右 侧 的 文本 框 中 可 以 输入 地 图 的 名 称 ， 如 图 4-97 
所 示 。 
a MITK 源 广 件 信 ] /未 命名 站 点 2/1 bs 宽 ) 385 [px 类 加 无 - ew | 
9 zoneveov | mpbsz 
os oo 图 4-97 图 像 地 图 
设置 区 域 


图 4-96 【属性 】 面板 


me— 
A 【地 图 】〗 属 性 中 输入 的 名 称 只 能 包含 字母 和 数字 ， 并 且 不 能 以 数字 开头 。 


2. 【热点 工具 】 按 钮 
单 击 【 热 点 工具 】 按 钮 时 避 2 立 ， 可 以 创建 图 像 的 热 区 链接 。 
3. 【 宽 】 和 【高 】 


该 属性 用 于 设置 在 浏览 器 中 显示 图 像 的 宽度 和 高 度 ， 以 像素 为 单位 。 比 如 在 【 宽 】 文 本 
框 中 输入 宽度 值 ， 页 面 中 的 图 片 即 会 显示 相应 的 宽度 ， 如 图 4-98 所 示 。 


Dr 【 宽 】 和 【高 】 的 单位 除 像素 外 ， 还 有 pc( 十 二 点 活字 )、pt( 点 )、in( 英 寸 )、 
慌 mm( 毫 米 )、cm( 厘 米 ) 和 2in+5mm 等 单位 的 组 合 。 


【 宽 】 和 【高 】 设 置 完成 后 ， 其 文本 框 的 右 侧 将 显示 【 重 设 图 像 大 小 】 按 钮 [人 @， 单 击 该 
按钮 ， 可 恢复 图 像 到 原来 的 大 小 。 


4. 【 源 文件 】 


该 属性 用 于 指定 图 像 的 路 径 。 单 击 文本 框 右 侧 的 【浏览 文件 】 按 钮 回 ， 弹 出 【选择 原始 
文件 】 对 话 框 ， 可 从 中 选择 图 像 文件 ， 或 直接 在 文本 框 中 输入 图 像 路 径 ， 如 图 4-99 所 示 。 
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图 4-98 设置 图 像 的 宽 与 高 图 4-99 【选择 原始 文件 】 对 话 框 


5. 【链接 】 


该 属性 用 于 指定 图 像 的 链接 文件 ， 可 拖 动 【 指 向 文件 】 图 标 够 到 【文件 】 面 板 中 的 某 个 
文件 上 ， 或 直接 在 文本 框 中 输入 URL 地 址 ， 如 图 4-100 所 示 。 


6. 【目标 】 
该 属性 用 于 指定 链接 页 面 在 框架 或 窗口 中 的 打开 方式 ， 如 图 4-101 所 示 。 
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图 4-100 输入 URL 图 4-101 设置 图 像 目 标 
【目标 】 属 性 的 下 拉 列 表 中 有 以 下 几 个 选项 。 其 含义 分 别 如 下 。 


NN e。_blank: 在 弹出 的 新 浏览 器 窗口 中 打开 链接 文件 。 
NN @  _parent: 如 果 是 嵌 套 的 框架 ， 会 在 父 框架 或 窗口 中 打开 链接 文件 ， 如 果 不 是 嵌 套 的 


框架 ， 则 与 top 相同 ， 在 整个 浏览 器 窗口 中 打开 链接 文件 。 
e@ _self: 在 当前 网 页 所 在 的 窗口 中 打开 链接 。 此 目标 为 浏览 器 默认 的 设置 。 
etop: 在 完整 的 浏览 器 窗口 中 打开 链接 文件 ， 因 而 会 删除 所 有 的 框架 。 


7. 【原始 】 


该 属性 用 于 设置 图 像 下 载 完成 前 显示 的 低 质量 图 像 ， 这 里 一 般 指 PNG 图 像 。 单 击 其 旁边 
的 【浏览 文件 】 按 钮 加 ， 即 可 在 弹出 的 对 话 框 中 选择 低 质量 图 像 ， 如 图 4-102 所 示 。 


8. 【替换 】 
该 属性 用 于 在 浏览 器 不 显示 图 像 而 显示 替代 图 像 的 文本 ， 如 图 4-103 所 示 在 其 右 侧 的 文本 
框 中 输入 对 图 像 的 说 明 性 文字 即 可 。 
Ba 
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Sv 加 
图 4-102 【选择 图 像 源 文件 】 对 话 框 图 4-103 设置 图 像 蔡 换文 本 


4.3.3 ”案例 13 一 一 图 像 的 对 齐 方式 


图 像 的 对 齐 方式 主要 是 设置 图 像 与 同一 行 中 的 文本 或 另 一 个 图 像 等 元 素 的 对 齐 方式 。 对 
齐 图 像 的 具体 操作 方法 如 下 。 

在 文档 窗口 中 选中 要 对 中 的 图 像 ， 如 图 4-104 所 示 。 

(1) 选择 【格式 】 一 【对 齐 】 一 【 左 对 齐 】 菜 单 命令 后 ， 效 果 如 图 4-105 所 示 。 
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(2) 选择 【格式 】 一 【对 齐 】 一 【居中 对 齐 】 菜 单 命令 后 ， 效 果 如 图 4-106 所 示 。 
(3) 选择 【格式 】 一 【对 齐 】 一 【 右 对 齐 】 菜 单 命令 后 ， 效 果 如 图 4-107 所 示 。 
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一 图 像 的 对 齐 方 式 主要 是 设置 图 
像 与 同一 行 中 的 文本 或 另 一 个 图 像 等 元 素 的 对 齐 万 式 .| 
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图 4-106 图 像 居 中 对 齐 


| 
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图 代 的 对 齐 方式 主要 是 设置 图 
仿 与 所 一行 中 的 文本 或 另 一 个 图 像 等 元 素 的 对 弄 方式 。 
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图 4-107 图 像 右 对 齐 


4.3.4 ”案例 14 一 一 插入 鼠标 经 过 图 像 


pp GG 


鼠标 经 过 图 像 是 指 在 浏览 器 中 查看 并 在 鼠标 指针 移 过 时 发 生变 化 的 图 像 。 鼠 标 经 过 图 像 
实际 上 是 由 两 幅 图 像 组 成 ， 即 初始 图 像 (页 面 首次 加 载 时 显示 的 图 像 ) 和 蔡 换 图 像 (鼠标 指针 经 
过 时 显示 的 图 像 )。 

插入 鼠标 经 过 图 像 的 具体 步骤 如 下 。 

EEJDp 新 建 一 个 空白 文档 ， 将 光标 置 于 要 插入 鼠标 经 过 图 像 的 位 置 ， 选 择 【 插 入 】 一 

【图 像 对 象 】 一 【鼠标 经 过 图 像 】 菜 单 命令 ， 如 图 4-108 所 示 。 


在 【插入 】 面 板 的 【常用 】〗 选 项 卡 中 单 击 【图像 】 按 钮 国 右 侧 的 下 拉 箭 头 
汇 。 日 然后 从 璋 出 的 下 拉 列 表 中 选择 【和 饼 标 经 过 图 像 】〗】 按 钮 四 ， 如 图 4-109 所 示 ， 也 
可 以 实现 插入 鼠标 经 过 图 像 。 
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4-108 ”选择 【鼠标 经 过 图 像 】 菜 单 命令 
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4-109 下 拉 列 表 


国 于 BY 弹出 【插入 鼠标 经 过 图 像 】 对 话 框 ， 在 【图 像 名 称 】 文 本 框 中 输入 名 称 (这 里 保 


持 默 认 名 称 不 变 )， 如 图 4-110 所 示 。 


EEC 单 击 【原始 图 像 】 文 本 框 右 侧 的 【浏览 〗】 按 钮 ， 在 弹出 的 【原始 图 像 : 】 对 话 
框 中 选择 鼠标 经 过 前 的 图 像 文 件 ， 设 置 完成 后 单 击 【 确 定 】 按 钮 ， 如 图 4-111 所 示 。 
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图 4-110 【插入 鼠标 经 过 图 像 】 对 话 框 


[ 


入 二 


2013/527 452 


#109 PG, 


ml "| 


图 4-111 选择 原始 图 像 


ED 返回 【插入 鼠标 经 过 图 像 】 对 话 框 ， 在 【原始 图 像 】 文 本 框 中 即 可 看 到 添加 的 


原始 图 像 文 件 路 径 ， 如 图 4-112 所 示 。 
EEJDp 单 击 【鼠标 经 过 图 像 】 文 本 框 右 侧 的 【浏览 】 按 钮 ， 在 弹出 的 【鼠标 经 过 图 
像 : 】 对 话 框 中 选择 鼠标 经 过 原始 图 像 时 显示 的 图 像 文件 ， 然 后 单 击 【 确 定 】 按 


钮 ， 返 回 【 插 入 鼠标 经 过 图 像 】 对 话 框 ， 如 图 4-113 所 示 。 
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图 4-112 【插入 鼠标 经 过 图 像 】 对 话 框 


4-113 ”选择 鼠标 经 过 图 像 


EC 在 【 蔡 换 文本 】 文 本 框 中 输入 名 称 (这 里 不 再 输入 )， 并 选中 【 预 载 鼠标 经 过 图 
像 】 复 选 框 。 如 果 要 建立 链接 ， 可 以 在 【 按 下 时 ， 前 往 的 URL]】 文本 框 中 输入 URL 
地 址 ， 也 可 以 单 击 右 侧 的 【浏览 】 按 钮 ， 选 择 链接 文件 (这 里 不 填 )， 如 图 4-114 所 示 。 
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图 4-114 【插入 鼠标 经 过 图 像 】 对 话 框 


EC 单 击 【 确 定 】 按 钮 ， 关 闭 对 话 框 ， 保 存 文档 ， 按 F12 键 在 浏览 器 中 预览 效果 。 
鼠标 指针 经 过 前 的 图 像 如 图 4-115 所 示 。 


Environmental 
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图 4-115 鼠标 经 过 前 的 图 像 
鼠标 指针 经 过 后 的 图 像 如 图 4-116 所 示 。 
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图 4-116 鼠标 经 过 后 显示 的 图 像 


4.3.5 ”案例 15 一 一 插入 图 像 占 位 符 


在 布局 页 面 时 ， 有 时 可 能 需要 插入 的 图 像 还 没有 制作 好 。 此 时 为 了 整体 页 面 效 果 的 统 
一 ， 可 暂时 使 用 图 像 占 位 符 来 蔡 代 图 片 的 位 置 。 
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插入 图 像 占 位 符 的 操作 步骤 如 下 。 

EC 新 建 一 个 空白 文档 ， 将 光标 置 于 要 插入 图 像 占 位 符 的 位 置 。 选 择 【 插 入 】 一 
【图 像 对 象 】 一 【图 像 占 位 符 】 菜 单 命令 ， 如 图 4-117 所 示 。 

ECRPp 弹出 【图 像 占 位 符 】 对 话 框 ， 如 图 4-118 所 示 。 
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图 4-117 选择 【图 像 占 位 符 】 菜 单 命令 图 4-118 【图 像 占 位 符 】 对 话 框 


区 于 在 【名 称 】 文本 框 中 输入 图 片 名 称 “Banner”， 在 【宽度 】 和 【高 度 】 文 本 框 
中 输入 图 片 的 宽度 和 高 度 (这 里 输入 “550” 和 “80”)， 在 【颜色 】 选 择 器 中 选择 图 
像 占 位 符 的 颜色 为 #0099FF， 在 【 蔡 换 文本 】 文 本 框 中 输入 蔡 换 图 片 的 文字 “Banner 
位 置 ”， 如 图 4-119 所 示 。 

EC 单 击 【确定 】 按 钮 ， 即 可 插入 图 像 占 位 符 ， 如 图 4-120 所 示 。 


名 葡 Bamer 
宽度 : 550 高 朗 80 
请 名: 加 | *00gFF 

葵 换 文本 : Bammer 位 置 | 


图 4-119 设置 图 像 占 位 符 图 4-120 插入 的 图 像 占 位 符 
5 【图 像 占 位 符 】 对 话 框 中 的 【名 称 】 文 本 框 中 的 名 称 只 能 包含 小 写 ASCII 字 


母 和 数字 ， 且 不 能 以 数字 开头 。 
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4.4 用 动画 美化 网 页 
在 网 页 中 插入 动画 是 美化 网 页 的 一 种 方法 ， 常 见 的 网 页 动画 有 Flash 动画 、FLV 视频 等 。 
4.4.1 案例 16 一 一 插入 Flash 动画 


Flash 与 Shockwave 电影 相 比 ， 其 优势 是 文件 小 且 上 传输 速度 快 。 在 网 页 中 插入 Flash 动 
画 的 操作 步骤 如 下 。 
ED 新 建 一 个 空白 文档 ， 将 光标 置 于 要 插入 Flash 动画 的 位 置 ， 选 择 【 插 入 】 一 【 媒 
体 】 一 SWF 菜单 命令 ， 如 图 4-121 所 示 。 
EEIDp 弹出 【选择 SWF】 对 话 框 ， 从 中 选择 相应 的 Flash 文件 ， 如 图 4-122 所 示 。 


EE pm 
省 扩 放 各 四 本 六 站 给 | 
Tn 
EE 
国有 作 改 (W)， 阁 式 (0) 命 人 (QO 站 点 (S$) 富 口 (W) 帮助 (H) 
| (6).. Cr+E 
i 图 像 0) Ctrl+Ak+I | 国 - 器 
| 图 像 对 象 (6) » 
| 媒体 (M) 上 SWF 人 Ctrl+Ak+F 
媒体 章 询 (M)… FLV.. ’ 
Wa] 
囊 格 () Ctrl+Akt+T Shockwave(S) FF 
要 格 对 象 (A) » 
布局 对 象 W) BI ea 
ActiveX(X) 
表单 站 »| tp) 
4-121 选择 SWF 菜单 命令 图 4-122 【选择 SWF】 对 话 框 


BY 单 击 【 确 定 】 按 钮 插入 Flash 动画 ， 然 后 调整 Flash 动画 的 大 小 ， 使 其 适合 网 
页 ， 如 图 4-123 所 示 。 
EEC 保存 文 要 ， 按 F12 键 在 浏览 器 中 预览 效果 ， 如 图 4-124 所 示 。 
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i 站] p\ 用 产 日 录 Decumertc 相 信和 站 襄 ZUntdled-11 车 让" | 0 
到 二 看 (V) 术语 闪 A] 工具 站” 才 若 (H) 
mn 3 | 
图 4-123 调整 Flash 的 大 小 4-124 ”预览 网 页 动画 
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4.4.2 ”案例 17 一 一 插入 FLV 视频 


在 CS6 中 用 户 可 以 向 网 页 中 轻松 地 添加 FLV 视频 ， 而 不 必 借 助 Flash 工具 添加 。 在 开始 
操作 之 前 ， 必 须 有 一 个 经 过 编码 的 FLV 文件 。 
插入 FLV 视频 的 操作 步骤 如 下 。 
EC 新 建 一 个 空白 文档 ， 将 光标 置 于 要 插入 Flash 动画 的 位 置 ， 选 择 【 插 入 】 一 【 媒 
体 】 一 FLV 菜单 命令 ， 如 图 4-125 所 示 。 
区 于 弹出 【插入 FLV】 对 话 框 ， 从 【视频 类 型 】 下 拉 列 表 中 选择 视频 类 型 。 这 里 选 


NN 择 【 累 进 式 下 载 视 频 】 选 项 ， 如 图 4-126 所 示 。 


六 须 关 到 -| 累进 式 下 载 视频 确定 
了 
ouRL 
(输入 FLV 文件 的 相对 或 地 对 路 径 ) 
a TE TYE 人 REIO 
[LL 
修改 (M) 眉 式 (0) 命令 (Q。 站 上 9) 窜 口 (W) 大助 (H) a er | 
Ee pe 忆 as 天下 
Al 四 - 
= 3 加 > EE 
规 全 (MM) 
失 休 得 询 (M) 
玲 格 (站 ) Cerl+Alt+T 
表格 对 象 (A) 
布局 对 象 (Y) © 要 观 四 视频 ， 笛 在 浏览 器 中 预 装 页面。 
表单 
图 4-125 选择 FLV 菜单 命令 图 4-126 【插入 FLV】 对 话 框 
SR。 “累进 式 下 载 视频 ”是 将 FLV 文件 下 载 到 站 点 访问 者 的 硬盘 上 ， 然 后 播放 。 


站 但 是 ， 与 传统 的 “下 载 并 播放 ”视频 传送 方法 不 同 ， 累 进 式 下 载 多 许 在 下 载 完成 
之 前 就 开始 播放 视频 文件 。 在 选择 视频 类 型 时 ， 也 可 以 选择 【 流 视频 〗 选 项 。 选 
择 此 选项 后 【视频 类 型 〗 选 项 下 方 的 选项 区 域 也 会 随 之 发 生变 化 ， 用 户 可 根据 实 
际 需要 进行 相应 的 设置 ， 如 图 4-127 所 示 。 

Br “ 流 视频 ”对 视频 内 容 进行 了 流 式 处 理 ， 并 在 一 段 可 确保 流畅 播放 的 缓冲 时 

刁 间 后 ， 才 在 网 页 上 播放 该 内 容 。 

EGRB) 在 URL 文本 框 右 侧 单 击 【 浏 览 〗】 按 钮 ， 即 可 在 弹出 的 【选择 FLV】 对 话 框 中 选 

择 要 插入 的 FLV 文件 ， 如 图 4-128 所 示 。 

EC 返回 【插入 FLV】 对 话 框 ， 在 【外 观 】 下 拉 列 表 中 选择 设置 显示 出 来 的 播放 器 
外 观 ， 如 图 4-129 所 示 。 

EETDp 设置 【宽度 】 和 【高 度 】， 并 选中 【限制 高 宽 比 】、【 自 动 播 放 】 和 【自动 重 
新 播放 】 等 3 个 复 选 框 ， 完 成 后 单 击 【 确 定 】 按 钮 ， 如 图 4-130 所 示 。 
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图 4-129 ”选择 外 观 图 4-130 设置 FLV 的 高 度 与 宽度 


pr “包括 外 观 ” 是 FLV 文件 的 宽度 和 高 度 与 所 选 外 观 的 宽度 和 高 度 相 加 得 出 的 
A 总和. 


EC 单 击 【 确 定 】 按 钮 关闭 对 话 框 ， 即 可 将 FLV 文件 添加 到 网 页 上 ， 如 图 4-131 
所 示 。 
保存 页 面 后 按 F12 键 ， 即 可 在 浏览 器 中 预览 效果 ， 如 图 4-132 所 示 。 
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Rs [oemoceme eas nmedihmn BP- ol 
[Sem x 
文 fn。 敌后 器” 坦 看 M) 站 过关 内 工具 (大 动 [Hi 

EXHIBITON 
easEabisst 3 NW icox -| gl %e x 3 iF/1 和 ticol 戌 1006 一 
图 4-131 在 网 页 中 插入 FLV 图 4-132 预览 网 页 


4.5 用 其 他 网 页 元 素 美化 网 页 


除了 使 用 文字 、 图 像 、 动 画 来 美化 网 页 外 ， 用 户 还 可 以 在 网 页 中 通过 插入 其 他 元 素来 美 
化 网 页 ， 比 如 水 平 线 、 日 期 、 特 殊 字符 等 。 


4.5.1 案例 18 一 一 插入 水 平 线 


网 页 文档 中 的 水 平 线 主 要 用 于 分 隔 文档 内 容 ， 使 文档 结构 清晰 明了 ， 便 于 浏览 。 在 文档 
中 插入 水 平 线 的 具体 步骤 如 下 。 
EEJDp 在 Dreamweaver CS6 的 编辑 窗 格 中 ， 将 光标 置 于 要 插入 水 平 线 的 位 置 ， 选 择 
【插入 】 一 HTML 一 【水 平 线 】 菜 单 命令 ， 如 图 4-133 所 示 。 
区 TZ 即 可 在 文档 窗口 中 插入 一 条 水 平 线 ， 如 图 4-134 所 示 。 


[ 画 pmEsDocumente 林 全 Ets Untted 1himl OHTVU -Ox 
[EZ] ETT Pe | 
图 4-133 选择 【水 平 线 】 菜 单 命令 图 4-134 ”插入 的 水 平 线 效果 


EEJep 在 【属性 】 面 板 中 ,将 【 宽 】 设 置 为 710，【 高 】 设 置 为 5， 【对齐 】 设 置 为 


四 
全 i 


“默认 ”， 并 选中 【阴影 】 复 选 框 ， 如 图 4-135 所 示 。 


图 4-135 【属性 】 面板 
ED 保存 页 面 后 按 F12 键 ， 即 可 预览 插入 的 水 平 线 效果 ， 如 图 4-136 所 示 。 


So - | 


图 4-136 ”预览 网 页 


4.5.2 ”案例 19 一 一 插入 日 期 


向 网 页 中 插入 系统 当前 日 期 的 具体 方法 有 以 下 两 种 。 

(1) 在 文档 窗口 中 ， 将 插入 点 放 到 要 插入 日 期 的 位 置 。 选 择 【 插 入 】 一 【日 期 】 菜 单 命 
令 ， 如 图 4-137 所 示 。 

(2) 单 击 【插入 】 面 板 【 常 用 】 选 项 卡 中 的 【日 期 】 图 标 | 图 |， 如 图 4-138 所 示 。 


图 4-137 选择 【上 日期】 菜单 命令 图 4-138 【常用 】 选 项 卡 


完成 上 述 任 一 种 操作 后 ， 可 按 以 下 步骤 操作 。 
EEC 弹出 【插入 日 期 】 对 话 框 ， 从 中 分 别 设置 【星期 格式 】、【 日 期 格式 】 和 【时 
间 格 式 】， 并 选中 【储存 时 自动 更 新 】 复 选 框 ， 如 图 4-139 所 示 。 
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EECSRP9 单 击 【 确 定 】 按 钮 ， 即 可 将 日 期 插入 到 当前 文档 中 ， 如 图 4-140 所 示 。 


“星期四, 


1974-03-07 
/3/74 


10:18 PM 
储存 时 自动 更 新 


2015 年 7 月 13 日 星期 一 10:15 AM 


古本 国画 [天 


图 4-139 【插入 日 期 】 对 话 框 图 4-140 插入 的 日 期 


4.5.3 ”案例 20 一 一 插入 特殊 字符 
在 Dreamweaver CS 中 ， 有 时 需要 插入 一 些 特殊 字符 ， 比 如 版 权 符号 和 注册 商标 符号 等 。 


插入 特殊 字符 的 具体 步骤 如 下 。 
EECRDe 将 光标 放 到 文档 中 需要 插入 特殊 字符 (这 里 输入 的 是 版 权 符号 ) 的 位 置 ， 如 图 4-141 
所 示 。 


四 TY 选择 【插入 】 一 HTML 一 【特殊 字符 】 一 【版 权 】 菜 单 命令 ， 即 可 插入 版 权 符 
号 ， 如 图 4-142 所 示 。 


雷 .\pocuments\ 未 命名 站 点 ZWUntited-Lhtml KHTMD” 。 - 口 x 


画 -\pocumente\ 林 命名 站 点 2\Untitled-Lhtml XHTML)* -Dx 
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图 4-141 定位 插入 特殊 符号 的 位 置 图 4-142 ”插入 的 特殊 符号 


如 果 在 【特殊 字符 】 的 子 菜单 中 没有 需要 的 字符 ， 则 可 通过 选择 【插入 】 一 
HTML 一 【特殊 字符 】 一 【其 他 字符 】 菜 单 命令 ， 打 开 【 插 入 其 他 字符 】 对 话 
框 ， 如 图 4-143 所 示 。 
EBY 单 击 需要 插入 的 字符 ， 该 字符 就 会 出 现在 【插入 】 文 本 框 中 ， 如 图 4-144 所 示 。 
EGG 单 击 【确定 】 按 钮 ， 即 可 将 该 字符 插入 到 文档 中 ， 如 图 4-145 所 示 。 
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图 4-143 【插入 其 他 字符 】 对 话 框 图 4-144 选择 要 插入 的 字符 容 
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图 4-145 ”插入 的 特殊 字符 


4.6 ”综合 演练 一 一 制作 图 文 并 茂 的 网 页 


本 实例 讲述 如 何在 网 页 中 插入 文本 和 图 像 ， 并 对 网 页 中 的 文本 和 图 像 进行 相应 的 排版 ， 
以 形成 图 文 并 茂 的 网 页 。 

其 具体 的 操作 步骤 如 下 。 

TY 打开 随 书 光盘 中 的 “ch04\index.htm” 文 件 ， 如 图 4-146 所 示 。 

EEJRDp 将 光标 放置 在 要 输入 文本 的 位 置 ， 然 后 输入 文本 ， 如 图 4-147 所 示 。 

ECEB) 将 光标 放置 在 文本 的 适当 位 置 ， 选 择 【 插 入 】 一 【图 像 】 菜 单 命令 ， 弹 出 【 选 
择 图 像 源 文件 】 对 话 框 ， 从 中 选择 图 像 文件 ， 如 图 4-148 所 示 。 

EC 单 击 【 确 定 】 按 钮 ， 插 入 图 像 ， 如 图 4-149 所 示 。 

本 BY 选择 【窗口 】 一 【属性 】 菜 单 命令 ,打开 【属性 】 面 板 ， 在 【属性 】 面 板 的 
【替换 】 文 本 框 中 输入 “欢迎 您 的 光临 ! ”， 如 图 4-150 所 示 。 

EEC 选 定 所 输入 的 文字 ， 在 【属性 】 面 板 中 设置 【字体 】 为 “宋体 ”，【 大 小 】 为 
12， 并 在 中 文 输入 法 的 全 角 状 态 下 ， 设 置 每 个 段落 的 段 首 空 两 个 汉字 的 空格 ， 如 
图 4-151 所 示 。 
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图 4-146 打开 素材 文件 


jinvees/003.jpe 。 | 他 已 葡 挤 中 双开 人 836 格 ! ~ 
| DD 国 六 对 史 OA 


4-150 ”输入 蔡 换 文字 


ES 一 = 
Kim 目标 规则 “新 css 规则 > ~ | 字体 0) 宋体 -B 
bcss| 编辑 规则 ] [css 面板 0) ] 大 小 S) 12 Fe 
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4-151 设置 字体 大 小 
ECG 保存 文 要 ， 按 F12 键 在 浏览 器 中 预览 效果 ， 如 图 4-152 所 示 。 


图 4-152 预览 效果 


4.7” 跟 我 学 上 机 


羔 N' 瑞 号 疝 到 一 一 嘎 习 疗 | 波 否 浊 售 址 


4.7.1 练习 目标 
能 够 熟练 掌握 本 章节 所 讲 内 容 。 


4.7.2 上 机 练习 


练习 1: 文档 的 基本 操作 。 
练习 2: 用 文字 美化 网 页 。 
练习 3: 用 图 像 美化 网 页 。 
练习 4: 用 动画 美化 网 页 。 
练习 5: 用 其 他 网 页 元 素 美化 网 页 。 


4.8 高 手 甜 点 


甜点 1: 如 何 查看 FLV 文件 ? 

若 要 查看 FLV 文件 ， 用 户 的 计算 机 必须 安装 Flash Player 8 或 更 高 的 版 本 。 如 果 没 有 安装 
所 需 的 Flash Player 版 本 ， 但 安装 了 Flash Player6.0、6.5 或 更 高 的 版 本 ， 则 浏览 器 将 显示 
Flash Player 快速 安装 程序 ， 而 非 蔡 代 内 容 。 如 果 用 户 拒绝 快速 安装 ， 那 么 页 面 就 会 显示 蔡 代 
内 容 。 

甜点 2: 如 何 正常 显示 插入 的 Active? 

使 用 Dreamweaver 在 网 页 中 插入 Active 后 ， 如 果 浏 览 器 不 能 正常 地 显示 Active 控件 ， 则 
可 能 是 因为 浏览 器 禁用 了 Active 所 致 ， 此 时 可 以 通过 下 面 的 方法 启用 Active。 

区 TD 打开 正 浏览 器 窗口 ， 选 择 【 工 具 】 一 【Intemet 选项 】 菜 单 命令 。 打 开 


11@ 


Dreamweaver 动态 网 站 开发 
案例 课堂 b>… 


【Intemet 选项 】 对 话 框 ， 选 择 【安全 】 选 项 卡 ， 单 击 【 自 定义 级 别 】 按 钮 ， 如 图 4-153 
所 示 。 


EEJP9 打开 【安全 设置 】 对 话 框 ， 在 【设置 】 列 表 框 中 启用 有 关 的 Active 选项 ， 然 后 
单 击 【确定 】 按 钮 即 可 ， 如 图 4-154 所 示 。 


订 
Metivek 
靖 hetiveX 控件 自动 提示 
加 禁用 


回 
图 站 全 生生 ActiveX 控件 执行 用 本 # 
用 


图 4-153 单 击 【 自 定义 级 别 】 按 钮 


图 4-154 【安全 设置 】 对 话 框 
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HTML5 中 新 增 了 大 量 的 元 素 与 属性 ， 这 些 新 增 的 元 素 和 属性 使 HIMLS5 的 功 
能 变 得 更 加 强大 ， 使 网 页 设计 效果 有 了 更 多 的 实现 可 能 。 
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5.1 新 增 的 主体 结构 元 素 


在 HTML5 中 ， 新 增 了 几 种 新 的 与 结构 相关 的 元 素 ， 它 们 分 别 是 section 元 素 、article 元 
素 、aside 元 素 、nav 元 素 和 time 元 素 。 


5.1.1 案例 1 一 一 section 元 素 


<section> 标 记 用 于 定义 文档 中 的 节 ， 比 如 章节 、 页 眉 、 页 脚 或 文档 中 的 其 他 部 分 。 它 可 
以 与 hl、h2、h3、h4、h5、h6 等 元 素 结合 起 来 使 用 ， 标 示 文 档 的 结构 。 
section 标记 的 代码 结构 如 下 : 


<section> 


</section> 


【 例 5.1】 section 元 素 的 使 用 (实例 文件 ，ch05\5.1.html)。 具 体 代码 如 下 : 


<!DOCTYPE HTML> 
<html> 
<body> 
<section> 
<h2>section 元 素 使 用 方法 </h2> 
<p> section 元 素 用 于 对 网 站 或 应 用 程序 中 页 面 上 的 内 容 进 行 分 块 。</p> 
</section> 
</body> 
</html> 


在 正 浏览 器 中 可 以 看 到 使 用 Section 元 素 标示 文档 结构 的 效果 如 图 5-1 所 示 ， 实 现 了 内 
容 的 分 块 显示 。 
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EC 


section 和 罗素 使 用 方法 
section 元 素 用 于 对 网 站 或 应 用 程序 中 页 面 上 的 内 容 进 
行 分 块 。 


图 5-1 例 5.1 的 代码 运行 效果 
5.1.2 ”案例 2 一 一 article 元 素 


<article> 标 记 用 于 定义 外 部 的 内 容 。 外 部 内 容 可 以 是 来 自 一 篇 外 部 的 新 闻 ， 或 者 来 自 blog 
的 文本 ， 或 者 是 来 自 论坛 的 文本 ， 或 者 是 来 自 其 他 外 部 源 的 内 容 。 


四 
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article 标记 的 代码 结构 如 下 : 


<article> 


</article> 


【 例 5.2】 article 标记 的 使 用 (实例 文件 : ch0S\5.2.htmD)。 有 具体 代码 如 下 : 


<!DOCTYPE HTML> 
<html> 
<body> 
<article> 
<header> 
<hl> apple 教程 </h1> 
<p> 时 间 : <time pubdate="pubdate">2013-2-1</time></p> 
</header> 
<p> 轻 松 学 习 apple 教程 ， 就 来 </p> 
<a href="http://www.apple.com">www.apple.com</a><br /> 
<footer> 
<p><smal1> 底 部 版 权 信息 : apple .com 公司 所 有 </small></p> 
</footer> 
</article> 
</body> 
</html> 
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在 IE 浏览 器 中 可 以 看 到 使 用 article 元 素 效果 ,如 > 
图 5-2 所 示 ， 实 现 了 外 部 内 容 的 定义 。 ole rr ex|Snuewonnal 
这 个 实例 讲述 article 元 素 使 用 方法 ， 在 header 元 素 中 eH AE) EaV i Ta WH 
嵌入 了 文章 的 标题 部 分 ， 在 标题 下 部 的 p 元 素 中 ,嵌入 了 apple 教 程 
一 大 段 正文 内 容 ， 在 结尾 处 的 footer 元 素 中 ， 媒 入 了 文章 。 | 3 


轻松 学 习 app1c 教 程 ， 就 来 


的 著作 权 ， 作 为 脚注 。 整 个 示例 的 内 容 相对 比较 独立 、 完 。 | -ce 


整 。 因 此 ， 对 这 部 分 内 容 使 用 了 article 元 素 。 并 部 折 权 信息 apFle co 公司 所 和 有 
1. article 元 素 与 section 元 素 的 区 别 
下 面 再 来 介绍 一 下 article 元 素 与 section 元 素 的 区 别 。 图 5-2 例 5.2 的 代码 运行 效果 


【 例 5.3】 article 元 素 与 section 元 素 的 区 别 (实例 文 
件 : ch05\5.5.html)。 具 体 代码 如 下 : 


<!DOCTYPE HTML> 
<html> 
<body> 
<article> 
<hl>article 元 素 与 section 元 素 的 使 用 方法 </h1> 
<p> 何 时 使 用 article 元 素 ? 何 时 使 用 section 元 素 ? </p> 
<section> 
<h2>article 元 素 使 用 方法 </h2> 
<p>article 元 素 代表 文档 、 页 面 或 应 用 程序 中 独立 的 、 完 整 的 、 可 以 独自 被 外 部 引用 
的 内 容 。</p> 
</section> 
<section> 


<h2>section 元 素 使 用 方法 </h2> 


115@ 


Dreamweaver 动态 网 站 开发 


案例 课堂 由"- 
<p> section 元 素 用 于 对 网 站 或 应 用 程序 中 页 面 上 的 内 容 进 行 分 块 。</p> 
</section> 
</article> 
</body> 
</html> 
在 IE 浏览 器 中 的 预览 效果 如 图 5-3 所 示 ， 可 以 清楚 地 一 
看 到 这 两 个 元 素 的 使 用 区 别 。 er 
2. article 元 素 的 嵌 套 article7 素 与 section 元 素 的 使 用 方法 


全 使 用 arricle 元 素 4 何 时 使 用 secrioa 元 素 … 


article 元 素 是 可 以 嵌 套 使 用 的 ， 内 层 的 内 容 在 原则 上 需 。 | rticle 元 素 使 用 方法 
要 与 外 层 的 内 容 相关 联 。 比 如 ， 一 篇 博客 文章 中 ， 针 对 该 | 吓 3 兢 乔 生 和 
文章 的 评论 就 可 以 使 用 嵌 套 article 元 素 的 方式 ; 用 来 呈现 nh 
评论 的 article 元 素 ， 被 包含 在 表示 整体 内 容 的 article 元 素 
里 面 。 

【 例 $5.4】 article 元 素 的 使 用 (实例 文件 ，ch05\5.5.html)。 
具体 代码 如 下 : 


<!DOCTYPE HTML> 
<html> 
<body> 
<article> 
<header> 
<hl>article 元 素 的 嵌 套 </h1> 
<p> 发 表 日 期 : <time pubdate="pubdate">2012/10/10</time></p> 
</header> 
<p>article 元 素 是 什么 ? 怎样 使 用 article 元 素 ? …… </p> 
<section> 
<h2> 评 论 </h2> 
<article> 
<header> 
<h3> 发 表 者 : 唯一 </h3> 
<p><time pubdate datetime="2011-12-23T:21-26:00">1 小 时 
前 </time></p> 
</header> 
<p> 这 篇 文章 很 不 错 啊 ， 顶 一 下 ! </p> 
</article> 
<article> 
<header> 
<h3> 发 表 者 : 唯一 </h3> 
<p><time pubdate datetime="2015-2-20 T:21-26:00">1 小 时 
前 </time></p> 
</header> 
<p> 这 篇 文章 很 不 错 啊 </p> 
</article> 
</section> 
</article> 
</body> 
</html> 


在 正 浏 览 器 中 预览 流行 上 述 代 码 ， 效 果 如 图 5-4 所 示 。 


5-3 例 5.3 的 代码 运行 效果 
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居 雪 日 基 ,2012/10/10 
erricle 元 素 是 什么 9 怎样 使 用 arricle 元 素 9 
评论 

发 表 者 : 唯一 

2 前 

这 篇 文章 恨 不 模 笛 ， 顶 一 下 ! 

发 表 者 : 唯一 

wai 
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5-4 例 5.4 的 代码 运行 效果 


实例 5.4 中 的 代码 比较 完整 ， 它 添加 了 读者 对 文章 的 评论 内 容 。 该 实例 内 容 被 分 成 了 几 个 
部 分 ， 文 章 标题 放 在 了 header 元 素 中 ， 文 章 正文 放 在 了 header 元 素 后 面 的 p 元 素 中 ， 然 后 
section 元 素 把 正文 与 评论 进行 了 区 分 (是 一 个 分 块 元 素 ， 用 来 把 页 面 中 的 内 容 进 行 区 分 )。 在 
section 元 素 中 嵌入 了 评论 的 内 容 。 评 论 中 每 一 个 人 的 评论 相对 来 说 又 是 比较 独立 的 、 完 整 
的 ， 因 此 对 它们 都 使 用 一 个 article 元 素 。 在 评论 的 article 元 素 中 ， 又 可 以 分 为 标题 与 评论 内 
容 部 分 ， 分 别 放 在 header 元 素 与 p 元 素 中 。 


5.1.3 ”案例 3 一 一 aside 元 素 


aside 元 素 一 般 用 来 表示 网 站 当前 页 面 或 文章 的 附属 信息 部 分 ， 它 可 以 包含 与 当前 页 面 或 
主要 内 容 相关 的 广告 、 导 航 条 、 引 用 、 侧 边栏 评论 ， 以 及 其 他 区 别 于 主要 内 容 的 部 分 。 

aside 元 素 主 要 有 以 下 两 种 使 用 方法 。 

(1) 被 包含 在 article 元 素 中 作为 主要 内 容 的 附属 信息 部 分 ， 其 内 容 可 以 是 与 当前 文章 有 
关 的 相关 资料 、 名 次 解释 等 。 使 用 该 方法 时 ，aside 标记 的 代码 结构 如 下 : 


<article> 
4 光 </h1> 
pe </p> 
Sades ne </aside> 
</article> 


(2) 在 article 元 素 之 外 使 用 作为 页 面 或 站 点 全 局 的 附属 信息 部 分 。 最 典型 的 是 侧 边栏 ， 
其 内 容 可 以 是 友情 链接 \ 博 客 中 的 其 他 文章 列表 、 广 告 单 元 等 。 使 用 该 方法 时 ，aside 标记 的 代 
码 结构 如 下 : 


<aside> 
> </h2> 
<ul> 
i </1i> 
le 过 /了 > 
</ul> 
a </h2> 
<ul> 
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eA </1i> 
全局 </1i> 
</ul> 
</aside> 


【 例 5.5】 aside 元 素 的 使 用 (实例 文件 ，ch05\5.5.html)。 其 代码 如 下 


<!DOCTYPE html> 
<html> 
<head> 
<title> 标 题 文件 </title> 
<link rel="stylesheet" href="mystyles.css"> 
</head> 
<body> 
<header> 
<h1> 站 点 主 标题 </h1> 
</header> 
<nav> 
<ul> 
<1i> 主 页 </1i> 
<1i> 图 片 </1i> 
<1i> 音 频 </1i> 
</ul> 
</nav> 
<section> 
</section> 
<aside> 
<blockquote> 文 章 1</blockquote> 
<blockquote> 文 章 2</blockquote> 
</aside> 
</body> 
</html> 


在 正 浏 览 器 中 预览 使 用 aside 元 素 的 效果 ， 如 图 5-5 所 示 。 


图 5-5 例 5.5 的 代码 运行 效果 


| <aside> 元 素 可 以 位 于 示例 页 面 的 左边 或 右边 ， 该 标记 并 没有 预定 义 的 位 置 。 
SS <aside> 元 素 仅仅 描述 所 包含 的 信息 ， 而 不 反映 结构 。<aside> 元 素 可 位 于 布局 的 
任意 部 分 ， 用 于 表示 任何 非 文档 主要 内 容 的 部 分 。 例 如 ， 可 以 在 <section> 元 素 中 

加 入 一 个 <aside> 元 素 ， 甚 至 可 以 对 该 元 素 加 入 一 些 重要 信息 中 ， 比 如 文字 


引用 。 


IGG 


@s 
第 
5.1.4 ”案例 4 一 nav 元 素 本 
对 
<nav> 用 来 将 具有 导航 性 质 的 链接 划分 在 一 起 ， 使 代码 结构 在 语义 化 方面 更 加 准确 ， 同 时 3 
对 于 屏幕 阅读 器 等 设备 的 支持 也 更 好 。 副 
具体 来 说 ，nav 元 素 可 以 用 于 以 下 这 些 场合 。 
e “传统 导航 条 : 现在 主流 网 站 上 都 有 不 同 层级 的 导航 条 ， 其 作用 是 将 当前 画面 跳 转 到 要 
网 站 的 其 他 主要 页 面 上 去 。 
e@ 侧 边 栏 导 航 : 现在 主流 博客 网 站 及 商品 网 站 上 都 有 侧 边 栏 导 航 ， 其 作用 是 将 页 面 从 新 
当前 文章 或 当前 商品 跳 转 到 其 他 文章 或 其 他 商品 页 面 上 去 。 增 
e@ ”页 内 导航 : 其 作用 是 在 本 页 面 几 个 主要 的 组 成 部 分 之 间 进 行 跳 转 。 对 
。 翻 页 操作 : 是 指 在 多 个 页 面 的 前 后 页 或 博客 网 站 的 前 后 篇 使 文章 滚动 。 
ee 其他: 除 此 之 外 ，nav 元 素 也 可 以 用 于 其 他 所 有 用 户 觉得 是 重要 的 、 基 本 的 导航 链接 和 
组 中 。 览 
具体 实现 代码 如 下 : 
<nav> 
<a href ds ">Home</a> 
<a ref=", ee ">Previous</a> 
a i ">Next</a> 
</nav> 
mn 
A 如 果 文 档 中 有 【前 后 】〗 按 钮 ， 则 应 该 把 它 放 到 <nav> 元 素 中 。 


一 个 页 面 中 可 以 拥有 多 个 <nav> 元 素 ， 可 将 其 作为 页 面 整体 或 不 同 部 分 的 导航 。 
【 例 5.6】 nav 元 素 的 使 用 (实例 文件 ，ch05\5.6.html)。 其 代码 如 下 : 


<!DOCTYPE html> 
<html> 
<body> 
<h1> 技 术 资 料 </h1> 
<nav> 
<ul> 
<1i><a href="/"> 主 页 </a></1i> 
<1i><a href="/events"> 开 发 文档 </a></1i> 
</ul> 
</nav> 
<article> 
<header> 
<hl>HTML 5 与 CSS 3 的 历史 </hl1> 
<nav> 
<ul> 
<1i><a href="#HTMI 5">HTML 5 的 历史 </a></1i> 
<1i><a href="#CSS 3">CSS 3 的 历史 </a></1i> 
过 ai 
</nav> 
</header> 
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<section id="HTML 5"> 
<h1>HTML 5 的 历史 </h1> 
<p> 讲 述 HTML 5 的 历史 的 正文 </p> 
<footer> 
<p> 
<a href="?edit"> 已 往 版 本 </a> | 
<a href="?delete"> 当 前 现状 </a> 
<a href="?rename"> 未 来 前 景 </a> 
</p> 
</footer> 
</section> 
<section id="CSS 3"> 
<h1l>cCss 3 的 历史 </h1> 
<p> 讲 述 css 3 的 历史 的 正文 </p> 
</section> 
<footer> 
<p> 
<a href="?edit"> 已 往 版 本 </a> | 
<a href="?delete"> 当 前 现状 </a> 
<a href="?rename"> 未 来 前 景 </a> 
</p> 
</footer> 
</article> 
<footer> 
<p><smal1> 版 权 所 有 : 青花 瓷 </small></p> 
</footer> 
</body> 
</html> 


在 正 浏览 器 中 预览 使 用 nav 元 素 效果 ， 如 图 5-6 所 示 。 
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5-6 例 5.6 的 代码 运行 效果 
在 实例 5.6 中 ， 可 以 看 到 <nav> 不 仅 可 以 用 来 作为 页 面 全 局 导航 ， 也 可 以 放 在 <article> 标 
签 内 ， 作 为 单 篇 文章 内 容 的 相关 导航 ， 链 接 到 当前 页 面 的 其 他 位 置 。 
@s 在 HIML 5 中 不 要 用 menu 元 素 代替 nav 元 素 ，menu 元 素 是 用 在 一 系列 发 出 
i 站 命令 的 菜单 上 的 ， 是 一 种 交互 性 的 元 素 ， 或 者 更 确切 地 说 是 使 用 在 Web 应 用 程序 
中 的 一 种 元 素 。 
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5.1.5 “案例 5 一 一 time 元 素 


<time> 是 HTML 5 新 增 的 一 个 标记 ， 用 于 定义 时 间或 日 期 。 该 元 素 可 以 代表 24 小 时 中 的 
某 一 时 刻 ， 且 在 表示 时 刻 时 ， 人 允许 有 时 间 差 。 在 设置 时 间或 日 期 时 ， 只 需 将 该 元 素 的 属性 
datetime 设 为 相应 的 时 间或 日 期 即 可 。 

具体 实现 代码 如 下 : 


<p> 
<time> 
</time> 

</p> 

<p> 
<time datetime= 
</time> 

</p> 


【 例 5.7】 time 元 素 的 使 用 (实例 文件 ，ch05\5.7.html)。 具 体 代码 如 下 : 


<!DOCTYPE html> 
<html> 
<body> 
<hl>Time 元 素 </h1> 
<p id="pl"> 
<time datetime="2015-5-17"> 
今天 是 2013 年 3 月 17 日 
</time> 
<p> 
<p id="p2"> 
<time datetime="2015-5-17T17:00"> 
现在 时 间 是 2013 年 3 月 17 日 晚上 5 点 
</time> 
<p> 
<p id="p3"> 
<time datetime="2015-12-31"> 
新 款 冬装 将 于 今年 年 底 上 市 
</time> 
</p> 
<p id="p4"> 
<time datetime="2015-5-15" pubdate="true"> 
本 消息 发 布 于 2013 年 3 月 15 日 
</time> 
</p> 
</body> 
</html> 


为 了 在 文档 中 将 这 两 个 日 期 进行 区 分 ， 上 述 代码 在 最 后 一 个 <time> 元 素 中 增加 了 pubdate 
属性 ， 表 示 此 日 期 为 发 布 日 期 。 
在 正 浏 览 器 中 预览 上 述 代码 使 用 time 元 素 的 运行 效果 ， 如 图 5-7 所 示 。 
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人 HAVsersAdminist 只- © x | 有 
文件 由 半 短 6 喜 看 MV) 交大 (A】 工具 项 动 H) 


Time 元 素 
今天 是 2013 年 3 月 17 日 


现在 时 间 是 2013 年 3 月 17 日 晚上 5 点 
新 款 冬 装 将 于 今年 年 底 上 市 
本 消息 发 布 于 2013 年 3 月 15 日 


5-7 ”程序 运行 结果 


@ ”<p> 元素 ID 号 为 pl 中 的 <time> 元 素 表示 的 是 日 期 。 页 面 在 解析 时 ， 获 取 的 是 属性 

datetime 中 的 值 ， 而 标记 之 间 的 内 容 只 是 用 于 显示 在 页 面 中 。 
@ ”<p> 元 素 ID 号 为 p2 中 的 <time> 元 素 表 示 的 是 日 期 和 时 间 ， 它 们 之 间 使 用 字母 了 进行 
分 隔 。 如 果 在 整个 日 期 与 时 间 的 后 面 再 加 上 一 个 字母 Z， 则 表示 获取 的 是 UTC( 世 界 
统一 时 间 ) 格 式 。 
<p> 元 素 ID 号 为 p3 中 的 <time> 元 素 表 示 的 是 将 来 时 间 。 
<p> 元 素 ID 号 为 p4 中 的 <time> 元 素 表 示 的 是 发 布 日 期 。 

<time> 元 素 中 的 可 选 属性 pubdate 表示 时 间 是 否 为 发 布 日 期 ， 它 是 一 个 布尔 

并 值 。 该 属性 不 仅 可 以 用 于 <time> 元 素 ， 还 可 用 于 <article> 元 素 。 


5.2 ”新 增 的 非 主体 结构 元 素 
在 HTMLS5 中 还 新 增 了 一 些 非 主体 的 结构 元 素 ， 比 如 header、hgroup、footer 等 。 


5.2.1 案例 6 一 一 header 元 素 


header 元 素 是 一 种 具有 引导 和 导航 作用 的 结构 元 素 ， 通 常用 来 防止 整个 页 面 或 页 面 内 某 
个 内 容 区 块 的 标题 ， 但 也 可 以 包含 其 他 内 容 ， 比 如 数据 表格 、 搜 索 表单 或 相关 的 logo 图 片 。 
header 标记 的 代码 结构 如 下 : 


<header> 


日 
京 @ @ 


</header> 


在 整个 页 面 中 的 标题 一 般 放 在 页 面 的 开头 。 一 个 网 页 中 的 header 元 素 的 个 数 并 没有 限 
制 ， 可 以 拥有 多 个 ， 可 以 为 每 个 内 容 区 块 添加 一 个 header 元 素 。 
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【 例 5.8】 header 元 素 的 使 用 (实例 文件 ，ch05\5.8.html)。 具 体 代码 如 下 : 


<!DOCTYPE html> 

<html> 

<body> 

<header> 
<h1> 网 页 标题 </h1> 

</header> 

<article> 
<header> 

<h1> 文 章 标题 </h1> 

</header> 
<p> 文 章 正 文 </p> 

</article> 

</body> 

</html> 


在 正 浏 览 器 中 预览 上 述 代码 使 用 heade 元 素 的 效果 ， 如 图 5-8 所 示 。 
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图 5-8 例 5.8/ 的 代码 运行 结果 


Sm 在 HTML5 中 ， 一 个 header 元 素 通常 至 少 包 括 一 个 headering 元 素 (hl-h6)。 此 
”外 还 可 以 包括 hgroup、nav 等 其 他 元 素 。 


5.2.2 ”案例 7 一 一 hgroup 元 素 


<hgroup> 标 记 用 于 对 网 页 或 区 段 (section) 的 标题 进行 组 合 。hgroup 元 素 通 常会 将 hl 一 h6 
元 素 进行 分 组 ， 辟 如 一 个 内 容 区 块 的 标题 及 其 子 标题 可 算 作 一 组 。 


hgroup 标记 的 使 用 代码 如 下 : 
<hgroup> 
4 </hil> 
HR t</h2> 
</hgroup> 
通常 ， 如 果 文 章 只 有 一 个 主 标题 ， 是 不 需要 hgroup 元 素 的 。 比 如 下 面 这 个 实例 就 不 需要 
hgroup 元 素 。 


【 例 5.9】 hgroup 元 素 的 使 用 (实例 文件 ，ch05\5.9.html)。 具 体 代码 如 下 : 


<!DOCTYPE html> 
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<html> 
<body> 
<article> 
<header> 
<h1> 文 章 标题 </h1> 
<p><time datetime="2015-05-20">2013 年 10 月 29 日 </time></p> 
</header> 
<p> 文 章 正文 </p> 
</article> 
</body> 
</html> 


在 正 浏 览 器 中 预览 上 述 代码 的 运行 效果 ， 如 图 5-9 所 示 。 


(eo) 司 H\WUsersAdminist D - CX | 狠 HAUsersAdministr.. 


文件 月。 钴 咒 6) 音 看 (V) ”次 贡 闪 (入 工具 (T) 帮助 (H) 
文章 标题 

2013 年 10 月 29 日 

文章 正文 


图 5-9 例 5.9 的 代码 运行 效果 


但 是 ， 如 果 文 章 有 主 标题 ， 主 标题 下 有 子 标题 ， 就 需要 使 用 hgroup 元 素 了 。 比 如 下 面 这 
个 实例 就 需要 hgroup 元 素 。 
【 例 5.10】 hgroup 元 素 的 使 用 (实例 文件 ，ch05\5.10.html)。 具 体 代码 如 下 : 


<!DOCTYPE html> 
<html> 
<body> 
<article> 
<header> 
<hgroup> 
<h1> 文 章 主 标题 </h1> 
<h2> 文 章 子 标题 </h2> 
</hgroup> 
<p><time datetime="2015-05-20">2013 年 10 月 29 日 </time></p> 
</header> 
<p> 文 章 正文 </p> 
</article> 
</body> 
</html> 


在 正 浏 览 器 中 预览 上 述 代码 使 用 hgroup 元 素 的 运行 效果 如 图 5-10 所 示 。 
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图 5-10 例 5.10 的 代码 运行 效果 
5.2.3 ”案例 8 一 一 footer 元 素 


footer 元 素 可 以 作为 其 上 层 父 级 内 容 区 块 或 是 一 个 根 区 块 的 脚注 。footer 通常 包括 其 相关 
区 块 的 脚注 信息 ， 比 如 作者 、 相 关 阅 读 链接 及 版 权 信息 等 。 
使 用 footer 标记 设置 文档 页 脚 的 代码 如 下 : 


SEOOLOE Xu </footer> 


在 HTML 5 出 现 之 前 ， 网 页 设计 人 员 使 用 下 面 的 方式 编写 页 脚 。 
【 例 5.11】 ul 元 素 的 使 用 (实例 文件 ，ch05\5.11.html)。 具 体 代码 如 下 : 


<!DOCTYPE html> 
<html> 
<body> 
<div id="footer"> 
<ul> 
<1i> 版 权 信 息 </1i> 
<1i> 站 点 地 图 </1i> 
<1i> 联 系 方式 </1i> 
</ul> 
<div> 
</body> 
</html> 


在 正 浏览 器 中 预览 上 述 代 码 使 用 UL 元 素 的 运行 效果 ， 如 图 5-11 所 示 。 
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5-11 例 5.11 的 代码 运行 效果 
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但 是 等 到 HTML 5 出 现 之 后 ， 例 5.11 中 的 编写 方式 便 不 再 被 使 用 ， 而 是 使 用 更 加 语 
义 化 的 footer 元 素来 替代 。 
【 例 $.12】 footer 元 素 的 使 用 (实例 文件 ，ch05\5.12.html)。 具 体 代码 如 下 : 


<!DOCTYPE html> 
<html> 
<body> 
<footer> 
<ul> 
<1i> 版 权 信 息 </1i> 
<1i> 站 点 地 图 </1i> 
<1i> 联 系 方式 </1i> 
</ul> 
</footer> 
</body> 
</html> 


在 正 浏 览 器 中 预览 上 述 代码 使 用 footer 元 素 的 运行 效果 如 图 5-12 所 示 。 


[user amiint P - Gx] B Husers adminio, 
文件 门 “站 句 (5) 至 看 (V) 。 必 二 关内 工具 Tm 寺 埠 (H) 


"版 权 信 息 
"站 点 地图 
”联系 方式 


图 5-12 例 5.12 的 代码 运行 效果 


Sm 与 header 元 素 一 样 ， 在 一 个 页 面 中 footer 元 素 的 个 数 也 不 受 限制 。 同 时 ， 还 
并 ”可 以 为 article 元 素 或 section 元 素 添加 footer 元 素 。 


【 例 5.13】 添加 多 个 footer 元 素 (实例 文件 : ch0s\s5.13.htmD)。 有 具体 代码 如 下 : 


<!DOCTYPE html> 
<html> 
<body> 
<article> 
章 内 容 
<footer> 
文章 的 脚注 
</footer> 
</article> 
<section> 
分 段 内 容 
<footer> 
分 段 内 容 的 脚注 
</footer> 
</section> 
</body> 
</html> 


. 
全 126 


沁 梧 尝 qe 人 _ 贡 9 涉 目 


在 正 浏 览 器 中 预览 上 述 代码 的 运行 效果 ， 如 图 5-13 所 示 。 


< 生 ] HAUsers\Administ D ~ OG X | 大 HAusersAdministr 
文件 人 ”法纪 {E) 各 看 (V) 收 营 夫 (A) 工具 [D) 帮助 (H) 


安 


分 段 内 容 
分 段 内 容 的 脚注 


5-13 “ 例 5.13 的 代码 运行 效果 
5.2.4 ”案例 9 一 一 figure 元 素 


figure 元 素 是 一 种 元 素 的 组 合 ， 可 带 有 标题 (可 选 )。figure 标签 用 来 表示 网 页 上 一 块 独立 
的 内 容 ， 将 其 从 网 页 上 移 除 后 不 会 对 网 页 上 的 其 他 内 容 产 生 影响 。figure 所 表示 的 内 容 可 以 是 
图 片 、 统 计 图 或 代码 示例 。 
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figure 标记 的 实现 代码 如 下 : 
<figure> 
a </hl> 
4 </p> 
</figure> 
mi 


使 用 figure 元 素 时 ， 需 要 使 用 figcaption 元 素 为 figure 元 素 组 添加 标题 。 不 
丫 过 ， 一 个 figure 元 素 内 最 多 只 允许 放置 一 个 figcaption 元 素 ， 其 他 元 素 可 无 限 放 
置 。 


1. 不 带 有 标题 的 figure 元 素 的 使 用 
【 例 5.14】 不 带 有 标题 的 figure 元 素 的 使 用 (实例 文件 ，ch05\5.14.html)。 有 具体 代 码 如 下 : 


<!DOCTYPE HTML> 
<html> 
<head> 
<title> 不 带 有 标题 的 figure 元 素 </title> 
</head> 
<body> 
<figure> 
<img alt="images/1ogo.jpg"/> 
</figure> 
</body> 
</html> 


在 正 浏 览 器 中 运行 上 述 代码 预览 ， 效 果 如 图 5-14 所 示 。 
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图 5-14 例 5.14 的 代码 运行 效果 
2. 带 有 标题 的 fgure 元 素 的 使 用 
【 例 5.15】 带 有 标题 的 figure 元 素 的 使 用 (实例 文件 ，ch05\5.15.html)。 具 体 代 码 如 下 : 


<!DOCTYPE HTML> 
<html> 
<head> 
<title> 带 有 标题 的 figure 元 素 </title> 
</head> 
<body> 

<figure> 

<img alt="images/1ogo.jpg"/> 
</figure> 
<figcaption> 标 题 提示 </figcaption> 

</body> 
</html> 


在 正 浏览 器 中 运行 上 述 代 码 预览 ， 效 果 如 图 5-15 所 示 。 


Cri -ox 
妆 后 有 妨 弓 Ej 但 于 NV) 作 区 安信 ) 工 吕 TT 大寺 (H] 


图 5-15 例 5.15 的 代码 运行 效果 
3. 多 张 图 片 ， 同 一 标题 的 figure 元 素 的 使 用 


【 例 5.16】 多 张 图 片 ， 同 一 标题 的 figure 元 素 的 使 用 (实例 文件 ，ch05\5.16.html)。 具 体 
代码 如 下 : 

<!IDOCTYPE HTML> 

<html> 

<head> 


<title> 多 张 图 片 ， 同 一 标题 的 figure 元 素 </title> 
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</head> 
<body> 
<figure> 
<img alt="images/1ogo-jpg"/> 
<img alt="images/lo0gol.jpg"/> 
<img alt="images/1ogo2.jpg"/> 
</figure> 
<figcaption> 标 题 提 示 </figcaption> 


</body> 
</html> 


在 正 浏 览 器 中 运行 上 述 代 码 预览 ， 效 果 如 图 5-16 所 示 。 
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图 5-16 例 5.16 的 代码 运行 效果 


5.2.5 ”案例 10 一 一 address 元 素 


address 元 素 用 来 在 文档 中 呈现 联系 信息 ， 包 括 文档 作者 、 文 档 维护 者 的 名 字 、 他 们 的 网 
站 链接 、 电 子 邮 箱 、 真 实地 址 、 电 话 号 码 等 。 


address 标签 的 实现 代码 如 下 : 
<address> 

ea SEs > </a> 
和 


【 例 5.17】 address 元 素 的 使 用 (实例 文件 ，ch05\5.17.html)。 有 具体 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<body> 
<address> 
<a href=http://blog.sina.com.cn/zhangsan> 张 三 </a> 
<a href=http://blog.sina.com.cn/1isi> 李 四 </a> 
<a href=http://blog.sina.com.cn/wanger> 王 二 </a> 
</address> 
</body> 
</html> 


在 正 浏 览 器 中 预览 上 述 代码 的 运行 效果 ， 如 图 5-17 所 示 。 
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5-17 例 5.17 的 代码 运行 效果 


另外 ，address 元 素 不 仅 可 以 单独 使 用 ， 还 可 以 与 footer 元 素 、time 元 素 及 address 元 素 结 
合 起 来 使 用 。 
【 例 $.18】 address 元 素 与 其 他 元 素 结合 使 用 (实例 文件 : ch0S\5.18.htmD)。 有 具体 代码 如 下 : 


<!DOCTYPE html> 
<html> 
<body> 
<footer> 
<div> 
<address> 
<a title=" 文 章 作 者 : 张 三 " href="http://blog.sina.com.cn/zhangsan"> 
张 三 </a> 
</address> 
发 表 于 <time datetime="2015-5-17">2013 年 3 月 17 日 </time> 
</div> 
</footer> 
</body> 
</html> 


在 正 浏 览 器 中 预览 上 述 代码 的 运行 效果 ， 如 图 5-18 所 示 。 
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图 5-18 例 5.18 的 代码 运行 效果 


5.3 ”新 增 其 他 常用 元 素 


除了 结构 元 素 外 ， 在 HTML 5 中 ， 还 新 增 了 其 他 元 素 ， 比 如 progress 元 素 、command 元 
素 、embed 元 素 、mark 元 素 、details 元 素 等 。 
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5.3.1 案例 11 一 一 mark 元 素 


mark 元 素 主要 用 来 在 视觉 上 向 用 户 呈 现 那 些 需要 突出 显示 或 高 亮 显 示 的 文字 。mark 元 素 
的 一 个 比较 典型 的 应 用 就 是 在 搜索 结果 中 ， 向 用 户 高 亮 显示 搜索 关键 词 。 其 使 用 方法 与 <em> 
和 <strong> 有 相似 之 处 ， 但 相 比 而 言 ，HTML 5 中 新 增 的 <mark> 元 素 在 突出 显示 时 ， 更 加 随意 
与 灵活 。 

HTML 5 中 <mark> 元 素 的 代码 示例 如 下 : 


【 例 5.19】 mark 元 素 的 使 用 (实例 文件 : ch05\5.19.htm])。 

在 页 面 中 ， 首 先 使 用 <h5> 元 素 创建 一 个 标题 “优秀 开发 人 员 的 素质 ”， 然 后 通过 <p> 元 素 
对 标题 进行 曾 述 。 在 阐述 的 文字 中 ,为 了 引起 用 户 的 注意 ， 使 用 <mark> 元 素 高 亮 处 理 字符 

具体 的 代码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>mark 元 素 的 使 用 </title> 
<link href="Css/css5.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
<h5> 优 秀 开发 人 员 的 <mark> 素 质 </mark></h5> 
<p class="p3_5"> 
一 个 优秀 的 Web 页 面 开发 人 员 ， 必 须 具有 
<mark> 过 硬 </mark> 的 技术 与 
<mark> 务 实 </mark> 的 专业 精神 
</p> 
</body> 
</html> 


在 正 浏 览 器 中 预览 上 述 代码 的 运行 效果 ， 如 图 5-19 所 示 。 


由 HAUsersAdminist 记 - C X | 碟 mark 元 素 的 合用 


六 件 (站 ”多 弓 F) 查看 (V) 阁 委 守 (A) 工具 T) 者 盈 (H) 


优秀 开发 人 员 的 素质 
一 个 优秀 的 Web 页 面 开 发 人 员 ， 必 须 具有 过 硬 的 技术 与 
务实 的 专业 精神 


图 5-19 例 5.19 的 代码 运行 效果 
<mark> 元 素 的 这 种 高 亮 显 示 的 特征 ， 除 用 于 文档 中 突出 显示 外 ， 还 常用 于 查看 搜索 结果 
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页 面 中 关键 字 的 高 亮 显示 ， 其 目的 主要 是 引起 用 户 的 注意 。 


> 虽然 <mark> 元 素 在 使 用 效果 上 与 <em> 或 <strong> 元 素 有 相似 之 处 ， 但 三 者 的 

i 申 出 发 点 是 不 一 样 的 。<strong> 元 素 是 作者 对 文档 中 菜 段 文字 的 重要 性 进行 的 强调 ; 
<em> 元 素 是 作者 为 了 突出 文章 的 重点 而 进行 的 设置 ; <mark> 元 素 是 数据 展示 时 ， 
以 高 亮 的 形式 显示 某 些 字符 ， 与 原作 者 本 意 无 关 。 


5.3.2 案例 12 一 一 rp、it 与 ruby 元 素 
SS ruby 元 素 由 一 个 或 多 个 字符 (需要 一 个 解释 /发 音 ) 和 一 个 提供 该 信息 的 rt 元 素 组 成 ， 还 包 


括 可 选 的 tp 元素 ， 用 于 定义 当 浏览 器 不 支持 mby 元 素 时 显示 的 内 容 。 
p、1t 与 ruby 元 素 结合 使 用 的 代码 结构 如 下 : 


<ruby> 
<rt><rp>(</rp> <rp>)</rp></rt> 
</ruby> 


【 例 5.20】 使 用 ruby 注释 繁体 字 “ 江 ”( 实 例文 件 ，ch05\5.20.html)。 具 体 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<body> 

<ruby> 
漠 <rt><rp> (</rp> 汉 <rp>)</rp></rt> 

</ruby> 

</body> 

</html> 


在 正 浏 览 器 中 预览 上 述 代码 的 运行 效果 ， 如 图 5-20 所 示 。 


TCF 


文本 交 昌 下 看 (/)， 必 硬 六 内。 工具 [大 肥 (H) 


次 


图 5-20 例 5.20 的 代码 运行 效果 


| 
-也 支持 ruby 元 素 的 浏览 器 不 会 显示 tp 元 素 的 内 容 。 


5.3.3 ”案例 13 一 一 progress 元 素 


progress 元 素 表示 运行 中 的 进程 ， 可 使 用 progress 元 素来 显示 JavaScript 中 耗费 时 间 的 函 
数 的 进程 。 比 如 下 载 文 件 时 ， 文 件 下 载 到 本 地 的 进度 值 ， 可 以 通过 该 元 素 动态 展示 在 页 面 


Ld 
全 2 


站 训 


第 
中 ， 展 示 的 方式 既 可 以 使 用 整数 (如 1 一 100)， 也 可 以 使 用 百分比 (如 10% 一 10096)。 包 
<progress> 元 素 的 属性 及 描述 如 表 5-1 所 示 。 了 
表 5-1 <progress> 元 素 的 属性 及 描述 了 
属 性 值 描 述 到 
max | 整数 或 浮 点 数 设置 完成 时 的 值 ， 表 示 总 体 工作 量 
value 整数 或 浮 点 数 设置 正在 进行 时 的 值 ， 表 示 已 完成 的 工作 量 于 
? i 
@ <progress> 元 素 中 设置 的 value 值 必 须 小 于 或 等 于 max 的 属性 值 ， 且 两 者 都 必 E 
角 本 ”有 需 大 于 0. 新 
增 
【 例 5.21】 使 用 progress 元 素 表示 下 载 进 度 ( 实 例文 件 ，ch05\5.21.html)。 上 有 具体 代码 如 下 : 对 
<!DOCTYPE HTML> 司 NN 
<html> 性 
<body> 速 
对 象 的 下 载 进度 : 饥 
<progress> 
<span id="objprogress">76</span>% 
</progress> 
</body> 
</html> 


在 正 浏 览 器 中 预览 上 述 代 码 的 运行 效果 ， 如 图 5-21 所 示 。 


[3 < 
p-cx| 


对 象 的 下 载 进度 ， 76% 


图 5-21 例 5.21 的 代码 运行 效果 
5.3.4 ”案例 14 一 一 command 元 素 


command 元 素 表示 用 户 能 够 调用 的 命令 ， 可 以 定义 命令 按钮 ， 比 如 单 选 按钮 、 复 选 框 或 
按钮 。 
HTML 5 中 使 用 的 command 元 素 的 代码 结构 如 下 : 


<command type="command">...... </command> 


【 例 5.22】 使 用 command 元 素 标记 一 个 按钮 (实例 文件 ，ch05\5.22.html)。 有 具体 代码 如 下 : 


<!DOCTYPE HTML> 
<html> 
<body> 

<menu> 
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<command onclick="alert('Hello World')">Click Me!</command> 
</menu> 
</body> 
</html> 


在 正 浏览 器 中 预览 上 述 代码 的 运行 效果 ， 如 图 5-22 所 示 。 单 击 网 页 中 的 Click Me 区 
域 ， 将 弹出 提示 信息 框 。 


区 


国 Wuser writ D ~ OX [Smoeervam 


全 Helo World 


5-22 例 5.22 的 代码 运行 效果 


Se 只 有 当 command 元 素 位 于 menu 元 素 内 时 ， 该 元 素 才 是 可 见 的。 否则 不 会 显 
装 。 示 这 个 元 素 ， 但 是 可 以 用 它 规定 键盘 快捷 键 。 


5.3.5 ”案例 15 一 一 embed 元 素 


embed 元 素 用 来 插入 各 种 多 媒体 ， 其 格式 可 以 是 Midi、Wav、AIFF、AU、MP3 等 。 
HTML 5 中 使 用 的 embed 元 素 的 代码 结构 如 下 : 


<embed src="...... x 


【 例 5.23】 使 用 embed 元 素 插入 动画 (实例 文件 ，ch05\5.23.html)。 具 体 代 码 如 下 : 


<!DOCTYPE HTML> 

<html> 

<body> 

<embed src="images/ 飞 翔 的 海岛 .swf"/> 
</body> 

</html> 


在 正 浏览 器 中 预览 上 述 代 码 的 运行 效果 ， 如 图 5-23 所 示 。 


HiUcercAdminict D - OX | 帮 HAu:e 
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图 5-23 例 5.23 的 代码 运行 效果 


a 


5.3.6 ”案例 16 一 一 details 与 summary 元 素 


details 元 素 表示 用 户 要 求 得 到 的 细节 信息 ， 与 summary 元 素 配合 使 用 。summary 元 素 提 
供 标题 或 图 例 。 标 题 是 可 见 的 ， 用 户 点 击 标题 时 ， 会 显示 出 细节 信息 。summary 元 素 应 该 是 
details 元 素 的 第 一 个 子 元 素 。 

HTML 5 中 使 用 details 与 summary 元 素 代码 结构 如 下 : 


<details> 
<summary>...... </summary> 


</details> 


【 例 5.24】 使 用 details 元 素 制作 简单 页 面 (实例 文件 ，ch05\5.24.html)。 具 体 代码 如 下 : 


<!DOCTYPE HTML> 
<html> 
<body> 
<details> 
<summary> 苹 果 冰 激 凌 </summary> 
<img src="images/ 冰 激 凌 .jpg” alt=" 苹 果 冰 激 凌 "/> 
<div> 
<h3> 材料 : 苹果 500g， 白 糖 150g， 新 鲜 牛 奶 两 瓶 。</h3> 
<p> 制 作 方法 : 将 苹果 洗 净 ， 去 皮 挖 核 ， 切 成 薄片 ， 搅 成 桨 状 ， 放 入 白糖 及 1000 克 开 水 ， 加 入 
煮沸 的 牛奶 ， 搅 拌 均匀 ， 倒 入 盛 器 内 冷却 后 置 于 冰箱 冻结 即 成 。 
</p> 
</div> 
</details> 
</body> 
</html> 


在 正 浏 览 器 中 预览 上 述 代码 的 运行 效果 ， 如 图 5-24 所 示 。 
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材料 :苹果 500g， 白 糖 150g， 新 鲜 牛 奶 两 短 。 


制作 方法 ， 桨 半 果 洗 净 ， 去 友 控 榨 ， 切 成 蓝 片 ， 捞 成 荣 状 ， 放 . 
精辟 1 5 tani 控 拌 均匀 。 和 
置 于 六 乱 诛 结 即 成 - 


图 5-24 例 5.24 的 代码 运行 效果 


pn 默认 情况 下 ， 浏 览 器 理解 details 元 素 ， 除 了 summary 标签 外 ， 它 里 面 的 其 他 
SS 内 容 都 将 会 被 隐藏 


5.3.7 案例 17 一 一 datalist 元 素 
datalist 是 用 来 辅助 文本 框 的 输入 功能 ， 他 本 身 是 隐藏 的 ， 与 表单 文本 框 中 的 list 属性 绑 
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定 ， 即 将 list 属性 值 设置 为 datalist 的 ID 号， 类似 子 suggest 组 件 ， 目 前 只 支持 opera 浏览 器 。 
HTML 5 中 使 用 datalist 元 素 的 代码 结构 如 下 : 


a </datalist> 


【 例 5.25】 使 用 datalist 元 素 制 作 列 表 框 (实例 文件 ，ch05\5.25.html)。 代 码 如 下 : 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>datalist 测试 </title> 
</head> 
<body> 
<form action="#"> 
<fieldset> 
<legend> 请 输入 职业 </1legend> 
<input type="text" list="worklist"> 
<datalist id="worklist"> 
<option value=" 程 序 开发 员 "></option> 
<option value=" 系 统 架构 师 "></option> 
<option value=" 数 据 维护 员 "></option> 
</datalist> 
</fieldset> 
</form> 
</body> 
</html> 


在 Opera 中 预览 上 述 代码 的 运行 效果 ， 如 图 5-25 所 示 。 
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5-25 例 5.5 的 代码 运行 效果 


5.4 ”新 增 的 全 局 属性 


在 HTML 5 中 新 增 了 许多 全 局 属性 ， 下 面 来 详细 介绍 一 下 常用 的 新 增 属性 。 
5.4.1 案例 18 一 一 content Editable 属性 


Contenteditable 属性 是 HTML5 中 新 增 的 标准 属性 ， 其 主要 功能 是 指定 是 否 允 许 用 户 编辑 
内 容 。 该 属性 有 两 个 值 : true 和 false。 
为 内 容 指定 的 Contenteditable 属性 为 true 时 ， 表 示 可 以 编辑 ， 为 false 时， 表示 不 可 编 
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辑 。 如 果 没 有 指定 值 则 会 采用 隐藏 的 inherit( 继 承 ) 状 态 ， 即 如 果 元 素 的 父 元 素 是 可 编辑 的 ， 则 
该 元 素 就 是 可 编辑 的 。 
【 例 5.26】 使 用 contentEditable 属性 的 实例 (实例 文件 ，ch05\5.26.html)。 具 体 代码 如 下 : 


<!DOCTYPE html> 

<head> 
<title>conentEditable 属性 示例 </title> 
</head> 

<body> 

<h3> 对 以 下 内 容 进行 编辑 内 容 </h3> 
<ol contentEditable="true"> 
<1i> 列 表 一 </1i> 
<13> 列 表 三 </Ti> 

<1i> 列 表 三 </1i> 

</o1> 

</body> 

</html> 


使 用 下 浏览 器 查看 网 页 内 容 ， 打 开 后 可 以 在 网 页 中 输入 相关 内 容 ， 效 果 如 图 5-26 
所 示 
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对 以 下 内 容 进行 编辑 内 容 
1. 列表 一 

2. 列表 二 

3. 列 家 三 


5-26 例 5.26 代码 运行 效果 


> 对 内 容 进行 编辑 后 ， 如 果 关 闭 网 页 ， 编 辑 的 内 容 将 不 会 被 保存 。 如 果 想 要 保存 
间 沾 其中 的 内 容 ， 则 只 能 把 该 元 素 的 innerHTML 发 送 到 服务 器 端 进行 保存 . 


5.4.2 案例 19 一 一 spellcheck 属性 


spellcheck 属性 是 HTML5 中 的 新 属性 ， 用 于 规定 是 否 对 元 素 内 容 进行 拼写 检查 。 可 对 
以 下 文本 进行 拼写 检查 : 类 型 为 text 的 input 元 素 中 的 值 ( 非 密码 )、textarea 元 素 中 的 值 、 
可 编辑 元 素 中 的 值 。 

【 例 $.27】 使 用 spellcheck 属性 的 实例 (实例 文件 : ch0S\5.27.htmnD)。 有 具体 代码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title>hello, word</title> 

</head> 

<body> 

<p contenteditable="true™" spellcheck="true"> 使 用 spellcheck 属性 ， 使 段落 内 容 可 被 
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编辑 。</p> 

</body> 

</html> 

使 用 下 浏览 器 查看 网 页 内 容 ， 打 开 后 可 以 在 网 页 中 输入 相关 内 容 ， 效 果 如 图 5-27 
所 示 。 
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使 用 spellcheck 忆 性， 使 段落 内 容 可 被 编辑 、 
你 好 ! 


5-27 ” 例 5.27 的 代码 运行 效果 
5.4.3 ”案例 20 一 一 tabindex 属性 


tabIndex 属性 可 设置 或 返回 按钮 的 Tab 键 控制 次 序 。 打 开 页 面 ， 连 续 按 Tab 键 ， 会 在 按 
钮 之 间 切 换 ，tabIndex 属性 则 可 以 记录 显示 切换 的 顺序 。 
【 例 5.28】 使 用 tabIndex 属性 的 实例 (实例 文件 ，ch05\5.28.html)。 具 体 代 码 如 下 : 


<html> 

<head> 

<script type="text/javascript"> 

function showTabIndex() 

1 

Var btl=document .getElementById('btl1') .tabIndex7 
Var bt2=document .getElementById('bt2') .tabIndex7 
Var bt3=document .getElementById('bt3') .tabIndex7 
document .write ("Tab 切换 按钮 1 的 顺序 : " + bt1); 
document .write ("<br />") 

document .write ("Tab 切换 按钮 2 的 顺序 : " + bt2) 7 
document .write("<br />"); 

document .write ("Tab 切换 按钮 3 的 顺序 : " + bt3); 
}</script> 

</head> 

<body> 

<button id="btl"” tabIndex="1"> 按 钮 1</button><br /> 
<button id="bt2" tabIndex="2"> 按 钮 2</button><br /> 
<button id="bt3" tabIndex="3"> 按 钮 3</button><br /> 
<br /> 

<input type="button" onclick="showTabIndex () "” value=" 显 示 切 换 顺 序 ” /> 
</body> 

</html> 


使 用 正 浏览 器 查看 网 页 内 容 ， 打 开 后 多 次 按 Tab 键 ， 使 控制 中 心 在 几 个 按钮 对 象 间 切 
换 ， 如 图 5-28 所 示 。 
单 击 【 显 示 切 换 顺 序 】 按 钮 ， 显 示 出 依次 切换 的 顺序 ， 如 图 5-29 所 示 。 
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加 Tab 切 换 按 钮 1 的 顺序 :1 
[| T 二 切换 近 钮 2 的 顺序 -2 
| Tab 切 换 控 钮 3 的 顺序 3 

接 可 3 


图 5-28 例 5.28 的 代码 运行 效果 5-29 例 5.28 的 代码 运行 效果 


5.5 ”HTML 新 增 属性 与 废除 的 属性 


新 增 属性 主要 分 为 三 大 类 : 表单 相关 的 属性 、 链 接 相 关 属性 和 其 他 新 增 属 性 。 具 体内 容 
如 下 。 


5.5.1 案例 21 一 一 表单 属性 
新 增 的 表单 属性 有 很 多 ， 下 面 来 分 别 进行 介绍 。 


1. autocomplete 


autocomplete 属性 规定 form 或 input 域 应 该 拥有 自动 完成 功能 。Autocomplete 适用 于 
<form> 标签 ， 以 及 以 下 类 型 的 <input> 标签 : text、search、url、telephone 、email 、 
password、datepickers、range、color。 


【 例 5.29】 使 用 autocomplete 属性 的 实例 (实例 文件 ，ch05\5.29.html)。 上 有 具体 代码 如 下 : 


<!DOCTYPE HTML> 

<html> 

<body> 

<form action="demo form.asp" method="get" autocomplete="on"> 
姓名 :<input type="text" name=" 姓 名 " /><br /> 
性 别 : <input type="text" sex=" 性 别 " /><br /> 
邮箱 : <input type="email" name="email" autocomplete="off" /><br /> 
<input type="submit" /> 

</form> 

</body> 

</html> 


使 用 正 浏览 器 查看 上 述 代码 的 运行 效果 ， 如 图 5-30 所 示 。 
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2. autofocus 


autofocus 属性 规定 在 页 面 加 载 时 ， 域 自动 地 获得 焦点 。autofocus 属性 适用 于 所 有 <input> 
标签 的 类 型 。 
【 例 5.30】 使 用 autofocus 属性 的 实例 (实例 文件 : ch0S\S.30.htmD。 有 具体 代码 如 下 : 
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<!DOCTYPE HTML> 
<html> 
<body> 


<form action="demo form.asp" method="get"> 
用 户 名 : <input type="text" name="user name" autofocus="autofocus" /> 
<input type="submit" /> 

</form> 

</body> 

</html> 


使 用 焉 浏览 器 查看 上 述 代 码 的 运行 效果 。 如 图 5-31 所 示 。 


(DO ) HAUserswdminist PD » © X | @ HAUsersAdministr, 

文件 站 妨 纺 (E) 二 看 (V) 相 硬 实 (AA) 工具 (Tm 大 动 (H) 

ee 站 HUsersAdminist P » OX | BHiUsers dmini, 

邮箱 : 一 一 文件 (站 捉 (E) 吾 要 (V】 收 基 突 A) 工具 [0 才 助 (H) 

用 户 名 ; 

图 5-30 例 5.29 的 代码 运行 效果 图 5-31 例 5.30 的 代码 运行 效果 

3.form 

form 属性 规定 输入 域 所 属 的 一 个 或 多 个 表单 。form 属性 适用 于 所 有 <input> 标 签 的 类 型 ， 
必须 引用 所 属 表单 的 id。 


【 例 5.31】 使 用 form 属性 的 实例 (实例 文件 ，ch05\5.31.html)。 具 体 代码 如 下 : 


<!DOCTYPE HTML> 
<html> 
<body> 
<form action="demo form.asp" method="get" id="user form"> 
姓名 :<input type="text"” name=" 姓 名 " /> 
<input type="submit" /> 
</form> 
性 别 : <input type="text" sex=" 性 别 " form="user form" /> 
</body> 
</html> 


使 用 正 浏览 器 查看 上 述 代码 的 运行 效果 ， 如 图 5-32 所 示 。 
4. form overrides 


表单 重 写 属性 (form override attributes) 人 允许 重 写 form 元 素 的 某 些 属性 设 定 。 
表单 重 写 属性 有 以 下 几 方 面 的 内 容 。 
e@ ”formaction， 重 写 表单 的 action 属性 。 
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formenctype， 重 写 表单 的 enctype 属性 。 

formmethod， 重 写 表单 的 method 属性 。 

formnovalidate， 重 写 表单 的 novalidate 属性 。 

formtarget 重 写 表单 的 target 属性 。 

表单 重 写 属性 适用 于 以 下 类 型 的 <input> 标 签 : submit 和 image。 

【 例 5.32】 使 用 form overrides 属性 的 实例 (实例 文件 ，ch05\5.32.html)。 具 体 代码 如 下 : 


<!DOCTYPE HTML> 
<html> 
<body> 
<form action="demo form.asp" method="get" id="user form"> 
邮箱 : <input type="email" name="userid" /><br /> 
<input type="submit"” value=" 提 交 " /><br /> 
<input type="submit" formaction="demo admin.asp”value=" 以 管理 员 身 份 提交 " 
/><br /> 
<input type="submit" formnovalidate="true"” value=" 提 交 未 经 验证 " /><br /> 
</form> 
</body> 
</html> 


使 用 正 浏览 器 查看 上 述 代码 的 运行 效果 ， 如 图 5-33 所 示 。 
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8) HUsersAdminist P -上 X | @ HUsersAdmin 3 司 HAUsersAdminist P ™ © X | 车 HusersAdminil 
文件 (站 兰考 (E) 重要 V)】 。 收 二 突 (A)。 工具 0) 大 二 (HH) 


姓名 : 
性 别 : 


图 5-32 例 5.31 的 代码 运行 效果 图 5-33 例 5.32 的 代码 运行 效果 


5. height 和 width 


height 和 width 属性 用 于 规定 image 类 型 的 input 标签 的 图 像 高 度 和 宽度 。height 和 width 
属性 只 适用 于 image 类 型 的 <input> 标 签 。 
【 例 5.33】 使 用 height 和 width 属性 的 实例 (实例 文件 ，ch05\5.33.html)。 有 具体 代码 如 下 : 


<!DOCTYPE HTML> 
<html> 
<body> 
<form action="demo form.asp" method="get"> 
用 户 名 : <input type="text" name="user name" /><br /> 
<input type="image" src="/images/ 按 钮 .jpg" width="99" height="99" /> 
</form> 
</body> 
</html> 
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使 用 正 浏览 器 查看 上 述 代码 的 运行 效果 ， 如 图 5-34 所 示 。 
6. list 
list 属性 规定 输入 域 的 datalist。datalist 是 输入 域 的 选项 列表 。list 属性 适用 于 以 下 类 型 的 


<input> 标 签 : text、search、 url、 telephone、email、date pickers、number、range、color。 


【 例 5.34】 使 用 list 属性 的 实例 (实例 文件 ，ch05\5.34.html)。 具 体 代码 如 下 : 


<!DOCTYPE HTML> 
<html> 
<body> 
<form action="demo form.asp" method="get"> 
主页 : <input type="url" list="url list" name="link" /> 
<datalist id="url list"> 
<option label="baisu" value="http://www.baidu.com" /> 
<option label="qq" value="http://www.qq.com" /> 
<option label="Microsoft" value="http://www.microsoft.com" /> 


</datalist> 
<input type="submit" /> 
</form> 
</body> 
</html> 
使 用 正 浏览 器 查看 上 述 代码 的 运行 效果 ， 如 图 5-35 所 示 。 
nN 
司 HUsersAdminist P - © X | @ ktvuzersAdminisr 国 HUsers Administ P ~ © X | @ HAUsersAdminist 
文人 月。 交 误 6 下 看 。 履 荐 闫 (A) 工具 人 T) 册 抱 0H) ET 
用 户 名 : 主页 : EE 
图 5-34 例 5.33 的 代码 运行 效果 5-35 ” 例 5.34 的 代码 运行 效果 


7.min、 max 和 step 


min、max 和 step 属性 用 于 为 包含 数字 或 日 期 的 input 类 型 规定 限定 (约束 )。max 属性 规 
定 输入 域 所 允许 的 最 大 值 ，min 属性 规定 输入 域 所 允许 的 最 小 值 ，step 属性 为 输入 域 规定 合法 
的 数字 间隔 (如 果 step="3"， 则 合法 的 数 是 -3.0.3,6 等 )。 

min、max 和 step 属性 适用 于 以 下 类 型 的 <input> 标 签 : date pickers、number、range。 

【 例 5.35】 使 用 min、max 和 step 属性 的 实例 (实例 文件 ，ch05\5.35.html)。 具 体 代码 如 下 : 


<!DOCTYPE HTML> 

<html> 

<body> 

<form action="demo form.asp" method="get"> 
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成 绩 : <input type="number" name="points" min="0" max="10" step="3"/> 于 
<input type="submit" /> 章 
</form> 三 
</body> 四 
</html> 新 
使 用 下 浏览 器 查看 上 述 代码 的 运行 效果 ， 如 图 5-36 所 示 。 外 
8. multiple 

司 

multiple 属性 规定 输入 域 中 可 选择 多 个 值 。multiple 属性 适用 于 以 下 类 型 的 <input> 标 签 : 。 
email 和 file。 新 
【 例 5.36】 使 用 multiple 属性 的 实例 (实例 文件 ，ch05\5.36.html)。 具 体 代 码 如 下 : a 
<!1DOCTYPE HTML> 素 
<html> 同 
<body> 性 
<form action="demo form.asp" method="get"> 速 

选择 图 片 : <input type="file" name="img" multiple="multiple" /> 览 
<input type="submit" /> 
</form> 
</body> 
</html> 


使 用 正 浏览 器 查看 上 述 代码 的 运行 效果 ， 如 图 5-37 所 示 。 
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图 5-36 例 5.35 的 代码 运行 效果 图 5-37 例 5.36 的 代码 程序 运行 效果 


Sm 单 击 图 5-37 中 的 【浏览 〗 按 钮 ， 可 以 打开 【选择 要 加 载 的 文件 】〗 对 话 框 ， 可 
SS 在 其 中 选择 要 添加 的 图 片 信息 。 


9. pattern (regexp) 
pattern 属性 规定 用 于 验证 input 域 的 模式 (pattern)。pattern 属性 适用 于 以 下 类 型 的 <input> 


标签 : text、search、url、telephone、email、password。 


【 例 5.37】 使 用 pattern 属性 的 实例 (实例 文件 : ch0S\5.37.htmD)。 有 具体 代码 如 下 : 


<!DOCTYPE HTML> 
<htm1> 
<body> 
<form action="demo form.asp" method="get"> 
电话 区 号 : <input type="text" name="country_code" pattern="[A-z]{3}" 
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title="Three letter country code" /> 
<input type="submit" /> 

</form> 

</body> 

</html> 


使 用 正 浏览 器 查看 上 述 代码 的 运行 效果 ， 如 图 5-38 所 示 。 
10. placeholder 


placeholder 属性 提供 一 种 提示 (hint)， 描 述 输入 域 所 期 待 的 值 。placeholder 属性 适用 于 以 
下 类 型 的 <input> 标 签 : text、search、url、telephone、email、assword。 
【 例 5.38】 使 用 placeholder 属性 的 实例 (实例 文件 ，ch05\5.38.html)。 具 体 代码 如 下 : 


<!DOCTYPE HTML> 

<html> 

<body> 

<form action="demo form.asp" method="get"> 
<input type="search" name="user search" placeholder="baidu" /> 
<input type="submit" /> 

</form> 

</body> 

</html> 


使 用 下 浏览 器 查看 上 述 代 码 的 运行 效果 ， 如 图 5-39 所 示 。 


司 HAusersAdminist D - OX i (BS 国 HAusersAdninis D - © XJ 加 hNueeewdmi 
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电话 区 号 : 


图 5-38 例 5.37 的 代码 运行 效果 图 5-39 例 5.38 的 代码 运行 效果 


11. required 
required 属性 规定 必须 在 提交 之 前 填写 输入 域 (不 能 为 空 )。required 属性 适用 于 以 下 类 型 


的 <input> 标 签 : text、search、url、telephone、 email、 password 、date pickers、number、 


checkbox、 radio、file。 
【 例 5.39】 使 用 required 属性 的 实例 (实例 文件 ，ch05\5.39.html)。 具 体 代码 如 下 : 


<!IDOCTYPE HTML> 

<html> 

<body> 

<form action="demo form.asp" method="get"> 
姓名 : <input type="text" name="usr name" required="required" /> 
<input type="submit" /> 

</form> 


</body> 
</html> 


使 用 正 浏览 器 查看 上 述 代码 的 运行 效果 ， 如 图 5-40 所 示 。 


图 5-40 例 5.39 的 代码 运行 效果 


5.5.2 ”案例 22 一 一 链接 相关 属性 
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HTML 新 增 的 与 链接 相关 的 属性 如 下 。 
1. media 属性 


media 属性 规定 目标 URL 是 为 哪 种 类 型 的 媒介 /设备 进行 优化 的 。 该 属性 用 于 规定 目标 
URL 是 为 特殊 设备 (比如 iPhone)、 语 音 或 打印 媒介 设计 的 。 只 能 在 href 属性 存在 时 使 用 。 
【 例 5.40】 使 用 media 属性 的 实例 (实例 文件 ，ch05\5.40.html)。 有 具体 代码 如 下 : 


《1DOCTYPE HTML> 
<html> 
<body> 
<a href="www.baidu.com" media="print and (resolution:300dpi)"> 
链接 查询 . 
</a> 
</body> 


</html> 
使 用 下 浏览 器 查看 上 述 代码 的 运行 效果 ， 如 图 5-41 所 示 。 


图 5-41 例 5.40 的 代码 运行 效果 


2. type 属性 
在 HTML5 中 ， 为 area 元 素 增加 了 type 属性 ， 用 于 规定 目标 URL 的 MIME 类 型 。 但 
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type 属性 仅 在 href 属性 存在 时 才 可 以 使 用 。 
type 属性 的 语法 结构 如 下 : 


<input type="value"> 


3. sizes 


在 HTML5 中 ， 为 link 元 素 增加 了 新 属性 sizes。 该 属性 可 以 与 icon 元 素 结合 使 用 (通过 
rel 属性 )。 该 属性 用 于 指定 关联 图 标 (icon 元 素 ) 的 大 小 。 


4. target 


在 HIML5 中 ， 为 base 元 素 增加 了 target 属性 ， 主 要 目的 是 保持 与 a 元 素 的 一 致 性 。 
【 例 5.41】 使 用 sizes 与 target 属性 的 实例 (实例 文件 ，ch05\5.41.html)。 具 体 代码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<link rel="icon" href="demo icon.ico" type="image/gif" sizes="16x16" /> 
</head> 
<body> 
<h2>Hello world!</h2> 
<p> 打 开 <a href="2.40.html"” target="” blank"> 新 链接 /a> 窗 口 。</p> 
</body> 
</html> 


使 用 下 浏览 器 查看 上 述 代码 的 运行 效果 ， 如 图 5-42 所 示 。 


€] HAUsersAdminist D - © X | @ HAUsers\Admi 


文件 (F) ” 蝙 强 (E) 童 看 (V) 收藏 大 (A) 工具 (T) 帮助 (H) 


Hello world! 


打开 新 链接 窗口 。 


图 5-42 例 5.41 的 代码 运行 效果 
5.5.3 “案例 23 一 一 其 他 属性 


除了 以 上 介绍 的 与 表单 和 链接 相关 的 属性 外 ，HTML 5 中 还 增加 了 其 他 属性 ， 如 表 5-2 
所 示 。 
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表 5-2 HTML 5 中 增加 的 其 他 属性 总 

属 性 隶属 于 意 义 时 

reversed ol 元素 指定 列表 倒序 显示 新 

et meta 元 素 。 | 为 文档 的 字符 编码 的 指定 提供 了 一 种 比较 良好 的 方式 显 
e menu 元 素 ”| 让 菜单 可 以 以 上 下 文 菜单 、 工 具 条 与 列表 菜单 3 种 形式 出 现 

label menu 元 素 ”| 为 菜单 定义 一 个 可 见 的 标注 于 

scoped style 元 素 。” | 用 来 规定 样式 的 作用 范围 ， 比 如 只 对 页 面 上 某 个 树 起 作用 让 

async script 元素 ”| 定义 脚本 是 否 异 步 执行 

ep i 开发 离线 Web 应 用 程序 时 它 与 API 结合 使 用 ， 定 义 一 个 到 

URL， 在 这 个 URL 上 描述 文档 的 缓存 信息 瑟 

Sandbox 、sredoc 与 | isame 元 素 | 用 来 提高 页 面 安全 性 ， 防 止 不 信任 的 Web 页 面 执行 某 些 操作 人 

seamless 览 


5.5.4 HTML 5 中 已 废除 的 属性 


在 HTML 5 中 废除 了 很 多 不 再 需要 使 用 的 属性 ， 这 些 属性 已 被 其 他 属性 或 其 他 方案 蔡 
代 ， 具 体内 容 如 表 5-3 所 示 。 
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表 5-3 HTML 5 中 废除 的 属性 


已 废除 的 属性 使 用 该 属性 的 元 素 在 HTML 5 中 代替 的 方案 

TeV link、a rel 

charset link、a 在 被 链接 的 资源 中 使 用 HTTP content-type 头 元 素 

shape、coords a 使 用 area 元 素 代替 a 元 素 

longdesc img、iframe 使 用 a 元 素 链接 到 较 长 描述 

target link 多 余 属性 ， 被 省 略 

nohref area 多 余 属性 ， 被 省 略 

_profile head 多 余 属 性 ， 被 省 略 

Version html 多 余 属性 ， 被 省 略 

name img id 

Scheme meta 只 为 菜 个 表单 域 使 用 scheme 

atchive 、classid 、codebase 、 je 使 用 data 与 type 属性 类 调用 插件 。 需 要 使 用 这 

codetype、declare、standby 些 属性 来 设置 参数 时 ， 使 用 param 属性 

Valuetype、type | param 使 用 name 与 value 属性 ， 不 声明 值 的 MIME 类 型 
使 用 以 明确 简洁 的 文字 开头 ， 后 跟 详 述 文字 的 形 

axis、abbr td、 也 式 ， 可 以 对 更 详细 的 内 容 使 用 title 属性 ， 来 使 单 
元 格 的 内 容 变 得 简短 
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续 表 
已 废除 的 属性 使 用 该 属性 的 元 素 在 HTML 5 中 代替 的 方案 
在 被 链接 的 资源 的 中 使 用 HTTP Content-type 
scope td 二 
头 元 素 
caption 、 input 、 
legend 、div 、hl 、 
align 使 用 CSS 样式 表 进 行 蔡 代 
h2 、h3 、h4、hs 、 
h6、pPp 
alink、link、text、vlink、 
body 使 用 CSS 样式 表 进 行 蔡 代 
background、bgcolor 
align 、bgcolor 、border 、 
cellpadding、cellspacing、 table 使 用 CSS 样式 表 进 行 蔡 代 
frame、rules、width 
align 、 char 、 charoff 、 En 
tbody、thead、tfoot | 使 用 CSS 样式 表 进 行 蔡 代 
height、nowrap、valien 
align 、 bgcolor 、 char 、 
charoff、 height、 nowrap、 | td、 也 使 用 CSS 样式 表 进 行 蔡 代 
valien、width 
align 、 bgcolor 、 char 、 本 这 本 
tr 使 用 CSS 样式 表 进 行 蔡 代 
charoff、valign 
align 、 char 、 charoff 、 
二 col、colgroup 使 用 CSS 样式 表 进 行 蔡 代 
valign、Wwidth 
align 、 border 、 hspace 、 Ea 
object 使 用 CSS 样式 表 进 行 蔡 代 
vspace 
clear br 使 用 CSS 样式 表 进 行 蔡 代 
compact、type ol、ul、1i 使 用 CSS 样式 表 进 行 蔡 代 
compact dl 使 用 CSS 样式 表 进行 替代 
compact menu 使 用 CSS 样式 表 进 行 蔡 代 
width | pre 使 用 CSS 样式 表 进行 替代 
align、hspace、Vspace img 使 用 CSS 样式 表 进 行 蔡 代 
align 、 noshade 、 size 、 Sp 
hr 使 用 CSS 样式 表 进行 替代 
width 
align 、 frameborder 、 
scrollingmarginheight、 iframe 使 用 CSS 样式 表 进 行 蔡 代 
marginwidth 
autosubmit menu 无 


5.6 ”综合 演练 一 制作 HTML 5 的 网 页 


HTML 的 格式 非常 简单 ， 是 由 文字 和 标记 组 成 的 纯 文 本 文件 ， 几 乎 任何 的 文字 编辑 软件 
都 可 以 编写 HTML 文件 。 比 如 Windows 中 的 写字 板 、 记 事 本 等 ， 只 要 将 文件 保存 成 ASCII 
纯 文 本 格式 ， 并 且 设 置 扩展 名 为 .htm 或 .html 即 可 。 


aa 当 qe 协 9 涛 


<style type="text/css"> 

<!-- 

.STYLE1 {font-size: 12px} 

一 -> 

</style></head> 

<body topmargin="0" leftmargin="0"> 

<table width="762" border="0" align="center" cellpadding="0" 
cellspacing="0"> 

<td height="534" valign="top"> 

<img src="images/ 学 校 .jpg”alt=" 学 校 简介 " width="240" height="180" border="3" 
align="left" /> 

<p class="STYLE1"> 

学 校 成 立 于 2002 年 ， 是 经 教育 主管 部 门 批准 成 立 的 一 所 教育 机 构 。 

办 学 几 年 来 ， 一 直 坚 持 “ 正 规 办 学 ， 保 证 教学 质量 ， 社 会 效益 第 一 ”的 原则 ， 为 社会 培养 了 大 量 优秀 的 
电脑 技术 人 才 ， 得 到 了 社会 各 界 的 认可 。 

<br /> 

几 年 来 ， 学 校 以 公司 技术 为 依托 ， 凭 借 科 学 的 教学 方法 、 严 格 的 管理 制度 、 一 流 的 教学 质量 和 广泛 的 就 
业 渠 道 ， 逐 步 形成 了 长 期 班 与 短期 班 互补 ， 学 历 教育 与 认证 培训 为 一 体 的 多 层次 教育 格局 ， 其 正 苗 壮 成 
长 为 电脑 培训 行业 中 一 颗 耀眼 的 新 星 。 

<br /> 

经 过 几 年 的 不 断 发 展 和 完善 ， 学 校 锤炼 了 一 支 具有 丰富 理论 知识 和 实践 经 验 、 专 业 知 识 扎实 、 高 素质 、 
敬业 精神 良好 的 年 轻 教师 队伍 。 

采用 驱动 式 教学 ， 保 证 了 教学 质量 和 学 习 效果 。 学 校 现 有 教学 场地 1000 余 平方 米 。 

采用 多 媒体 教学 ， 全 空调 学 习 环境 。 交 通 便利 ， 环 境 幽 雅 。 

<br /> 

以 “培养 专业 实用 的 技能 人 才 ” 为 目标 ， 以 服务 社会 为 已 任 ， 先 后 为 广东 、 上 海 、 江 苏 、 浙 江 以 及 河南 
地 区 输送 大 量 优秀 专业 人 才 。 

<br /> 

在 秉承 “系统 、 专 业 、 实 用 ”的 同时 ， 不 断 汲取 现代 化 的 管理 理念 和 技术 ， 针 对 学 科 的 技术 发 展 和 市 场 
的 就 业 需 求 ， 推 出 了 专业 定位 更 准确 、 课 程 组 合 更 优化 的 专业 ， 将 为 有 志 于 IT 领域 发 展 的 社会 各 界 人 
士 提供 更 切实 际 的 多 样 化 教育 选择 。 

<br /> 

学 校 特色 : 

<br /> 

妆 全 封闭 管理 ， 统 一 食 宿 ， 让 学 生 不 受 外 界 干扰 。 学 校 将 为 学 员 办 理 人 身 保险 ， 保 障 学 生 在 校 期 间 的 最 
大 安全 。 

<br /> 


人 
证 书 。 


a 

下 面 的 实例 是 用 记事 本 创建 HTML 文件 。 用 户 在 输入 HTML 代码 时 ， 需 要 注意 图 片 引用 二 

的 路 径 。 
ET 打开 记事 本 ， 输 入 以 下 HTML 代码 : " 
html> 亚 
a 大 
<title> 学 校 网 站 </title> 层 

速 

见 


GG 


<br /> 
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妈 就 业 渠道 广阔 ， 办 学 五 年 来 ， 学 员 分 别 安排 到 广州 、 上 海 、 福 建 、 浙 江 、 江 苏 、 河 南 等 地 。 
<br /> 


国富 息 化 人 才 库 备案 。 保 证 合格 毕业 生 百 分 百 高 薪 就 业 ， 彻 底 免除 家 长 的 后 顾 之 


</p> 
</td> 
< Er> 
</table> 
</td> 
WE 
</table> 
</body> 
</html> 


EEJ2y 编辑 完 HTML 文件 后 ， 选 择 【 文 件 】 一 【保存 】 菜 单 命令 ， 在 弹出 的 【另存 
为 】 对 话 框 中 将 【保存 类 型 】 设 为 【所 有 文件 】， 将 扩展 名 设 为 .htm 或 .html， 然 后 
单 击 【保存 】 按 钮 ， 如 图 5-43 所 示 。 

EEIRe 打开 网 页 ， 在 浏览 器 中 浏览 网 页 ， 如 图 5-44 所 示 。 


ee aa A 


i 
ee 
ee rn 


A ,re 
a 


a 
rar 


sm le le 


图 5-43 【另存 为 】 对 话 框 图 5-44 ”网 页 预览 效果 


5.7” 跟 我 练 练 手 


5.7.1 练习 目标 
能 够 熟练 掌握 本 章节 所 讲 内 容 。 


5.7.2 上 机 练习 


练习 1: 
练习 2: 
练习 3: 
练习 4: 


四 
全 i150 


练习 新 增 主体 结构 元 素 的 使 用 。 
练习 新 增 非 主体 结构 元 素 的 使 用 。 
练习 新 增 全 局 属性 的 使 用 。 

练习 新 增 其 他 属性 的 使 用 。 


5.8 高 手 甜 点 


甜点 1: HTML5 中 的 单 标记 和 双 标 记 的 书写 方法 。 


答 : HTML5 中 的 标记 分 为 单 标记 和 双 标记 。 所 谓 单 标记 是 指 没 有 结束 标记 的 标记 ， 双 标 
记 是 指 既 有 开始 标记 又 有 结束 标记 。 

对 于 单 标 记 是 不 允许 写 结束 标记 的 元 素 ， 只 人 允许 使 用 < 元 素 /> 的 形式 进行 书写 。 比 如 | 
“<br>.….….</br>” 的 书写 方式 是 错误 的 ， 正 确 的 书写 方式 为 <br />。 当 然 ， 在 HTML5 之 前 的 
版 本 中 <br> 这 种 书写 方法 可 以 被 沿用 。HTML5 中 不 允许 写 结束 标记 的 元 素 有 area、base、 
br 、 col、 command、embed、hr、img、input、keygen、link、meta、param、source、track、 
wbr。 

对 于 部 分 双 标 记 可 以 省 略 结束 标记 。HTML5S 中 允许 省 略 结束 标记 的 元 素 有 li、dt、dd、 
P、rt、IP、optgroup、option、colgroup、thead、tbody、ttoot、tr、td、th。 

HTML5 中 有 些 元 素 还 可 以 完全 被 省 略 ， 即 使 这 些 标记 被 省 略 了 ， 该 元 素 还 是 以 隐 式 的 方 
式 存在 的 。HTMLS5 中 允许 省 略 全 部 标记 的 元 素 有 html、head、body、colgroup、tbody。 


甜点 2: 新 增 属性 Target 在 HTML 5.01 与 HTML 5 之 间 的 差异 有 哪些 ? 


答 : 在 HTML5 中 ， 不 再 允许 把 框架 名 称 设 定 为 目标 ， 因 为 不 再 支持 frame 和 frameset。 
在 HIML 5.01 中 ，self、parent 和 top 这 3 个 值 大 多 数 时 候 与 过 ame 一 起 使 用 。 


a 
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不 在 网 页 中 迷路 
一 一 设计 网 页 


、 空 链接 及 脚本 链 


锚 记 链接 、 电 子 邮件 链接 


链接 是 网 页 中 比较 重要 的 部 分 ， 是 各 个 网 页 之 间 相 互 跳 转 的 依据 。 网 页 中 常用 
一 下 如 何 创 建 网 站 链接 。 


的 链接 形式 包括 文本 链接 、 图 像 链接 、 


接 等 。 本 章 就 来 介绍 
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6.1 链接 与 路 径 


链接 是 网 页 中 极为 重要 的 部 分 ， 单 击 文档 中 的 链接 ， 即 可 跳 转 至 相应 的 位 置 。 网 站 中 正 
是 有 了 链接 ， 才 实现 了 在 各 文档 之 间 的 相互 跳 转 进而 方便 地 查阅 各 种 各 样 的 知识 ， 享 受 网 络 
带 来 的 无 穷 乐 趣 。 


6.1.1 链接 的 概念 


NN 链接 也 叫 超级 链接 。 根 据 链接 源 端点 的 不 同 ， 超 级 链接 可 分 为 超 文本 和 超 链接 两 种 。 超 


文本 就 是 利用 文本 创建 的 超级 链接 。 在 浏览 器 中 ， 超 文本 一 般 显示 为 下 方 带 蓝 色 下 划 线 的 文 
字 。 超 链接 是 利用 除了 文本 之 外 的 其 他 对 象 所 构建 的 链接 ， 如 图 6-1 所 示 。 

通俗 地 讲 ， 链 接 由 两 个 端点 (也 称 锚 ) 和 一 个 方向 构成 ， 通 常 将 开始 位 置 的 端点 称 作 源 端点 
(或 源 锚 )， 而 将 目标 位 置 的 端点 称 为 目标 端点 (或 目标 锚 )， 链 接 就 是 由 源 端点 到 目标 端点 的 一 
种 跳 转 。 目 标 端点 可 以 是 任意 的 网 络 资源 ， 比 如 ， 它 可 以 是 一 个 页 面 、 一 幅 图 像 、 一 段 声 
音 、 一 段 程序 ， 甚 至 可 以 是 页 面 中 的 某 个 位 置 。 

利用 链接 可 以 实现 在 文档 间或 文档 中 的 跳 转 。 可 以 说 ， 浏 览 网 页 就 是 从 一 个 文档 跳 转 到 
另 一 个 文档 ， 从 一 个 位 置 跳 转 到 另 一 个 位 置 ， 从 一 个 网 站 跳 转 到 另 一 个 网 站 的 过 程 ， 而 这 些 
过 程 都 是 通过 链接 来 实现 的 ， 如 图 6-2 所 示 。 
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图 6-1 网 站 首页 图 6-2 ”通过 链接 进行 跳 转 


6.1.2 ”链接 路 径 


一 般 来 说 ，Dreamweaver 允许 使 用 的 链接 路 径 有 3 种 : 绝对 路 径 、 文 档 相 对 路 径 和 根 相 
对 路 径 。 


1. 绝对 路 径 
如 果 在 链接 中 使 用 完整 的 URL 地 址 ， 这 种 链接 路 径 就 被 称 为 绝对 路 径 。 绝 对 路 径 的 特点 


是 ， 路 径 同 链接 的 源 端 点 无 关 。 
例如 要 创建 “白雪 能 马 ” 文 件 夹 中 的 index.html 文档 的 链接 ， 则 可 使 用 绝对 路 径 “D:' 我 
的 站 点 \index.html”， 如 图 6-3 所 示 。 


Da 
要 采用 绝对 路 径 有 两 个 缺点 : 一 是 不 利于 测试 ， 二 是 不 利于 移动 站 点 。 
2. 文档 相对 路 径 


文档 相对 路 径 是 指 以 当前 文档 所 在 的 位 置 为 起 点 到 被 链接 文档 经 由 的 路 径 。 文 档 相 对 路 
径 可 以 表述 源 端点 同 目标 端点 之 间 的 相互 位 置 ， 它 同 源 端点 的 位 置 密切 相关 。 

使 用 文档 相对 路 径 有 以 下 3 种 情况 。 

(1) 如 果 链 接 中 源 端点 和 目标 端点 在 同一 目录 下 ， 那 么 在 链接 路 径 中 只 需 提供 目标 端点 
的 文件 名 即 可 ， 如 图 6-4 所 示 。 


xm | 这 + 加 撞 亡 柄 ] 
二 接 D:\ 乱 的 站 后 Vindex tl 已 Er] 了 
lk Ey 
本 
Tab 键 过 引 Tab 键 素 引 - 
图 6-3 绝对 路 径 图 6-4 相对 路 径 
(2) 如 果 链 接 中 源 端点 和 目标 端点 不 在 同一 目录 下 ， 则 需要 提供 目录 名 、 前 斜 杠 和 文件 


名 ， 如 图 6-5 所 示 。 
(3) 如 果 链 接 指向 的 文档 没有 位 于 当前 目录 的 子 级 目录 中 ， 则 可 利用 “../” 符 号 来 表示 
当前 位 置 的 上 级 目录 ， 如 图 6-6 所 示 。 


文 二 树 接 
委 按 ”我 的 站 点 \index. html 
目标 : blenk = 


行 本 
访问 从: 
Tab 健 委 引 


图 6-5 相对 路 径 图 6-6 相对 路 径 


采用 相对 路 径 的 特点 是 ， 只 要 站 点 的 结构 和 文档 的 位 置 不 变 ， 那 么 链接 就 不 会 出 错 ， 否 
则 链接 就 会 失效 。 在 把 当前 文档 与 处 在 同一 文件 夹 中 的 另 一 文档 链接 ， 或 把 同一 网 站 下 不 同 
文件 夹 中 的 文档 相互 链接 时 ， 就 可 以 使 用 相对 路 径 。 


3. 根 相对 路 径 
根 相对 路 径 可 被 看 作 是 绝对 路 径 和 相对 路 径 之 间 的 一 种 折 中 ， 是 指 从 站 点 根 文件 夹 到 被 
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链接 文档 经 由 的 路 径 。 在 这 种 路 径 表 达 式 中 ， 所 有 的 路 径 都 是 从 站 点 的 根 目录 开始 的 ， 同 源 
端点 的 位 置 无 关 ， 通 常用 一 个 斜 线 /来 表示 根 目录 。 


Sn 根 相 对 路 径 同 绝对 路 径 非常 相似 ， 只 是 它 省 去 了 绝对 路 径 中 带 有 协议 地 址 的 
SN。 部 分 ， 


6.1.3 ”链接 的 类 型 


根据 链接 的 范围 ， 链 接 可 分 为 内 部 链接 和 外 部 链接 两 种 。 内 部 链接 是 指 同 一 个 文档 之 间 
SS 的 链接 ， 外 部 链接 是 指 不 同 网 站 文档 之 间 的 链接 。 


根据 建立 链接 的 不 同 对 象 ， 链 接 又 可 分 为 文本 链接 和 图 像 链接 两 种 。 浏 览 网 页 时 ， 会 看 
到 一 些 带 下 划 线 的 文字 ， 将 鼠标 移 到 文字 上 时 ， 鼠 标 指针 将 变 成 手 形 ， 单 击 文字 就 会 打开 一 
个 网 页 ， 这 样 的 链接 就 是 文本 链接 ， 如 图 6-7 所 示 。 

在 网 页 中 浏览 内 容 时 ， 若 将 鼠标 移 到 图 像 上 ， 鼠 标 指针 将 变 成 手 形 ， 单 击 图 片 就 会 打开 
一 个 网 页 ， 这 样 的 链接 就 是 图 片 链接 ， 如 图 6-8 所 示 。 
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图 6-7 文本 链接 图 6-8 图 片 链接 


6.2 添加 网 页 超 链接 
Intemet 之 所 以 越 来 越 受 欢迎 ， 很 大 程度 上 是 因为 在 网 页 中 使 用 了 链接 。 


在 2 添加 文本 链接 


通过 Dreamweaver， 可 以 使 用 多 种 方法 来 创建 内 部 链接 。 使 用 【属性 】 面 板 创建 网 站 内 
文本 链接 的 具体 步骤 如 下 。 
启动 Dreamweaver CS6， 打 开 随 书 光盘 中 的 ch06\index.htm 文件 ， 选 定 “ 关 于 我 
们 ”这 几 个 字 ， 将 其 作为 建立 链接 的 文本 ， 如 图 6-9 所 示 。 


. 
Gise 


[es 


区 于 PY 单 击 【 属 性 】 面 板 中 的 【浏览 文件 】 按 钮 口 ， 弹 出 【选择 文件 】 对 话 框 ， 选 择 
网 页 文件 “关于 我 们 .html”， 单 击 【 确 定 】 按 钮 ， 如 图 6-10 所 示 。 
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图 6-9 选 定 文本 6-10 【选择 文件 】 对 话 框 


IGG 


5 在 【属性 】 面 板 中 直接 输入 链接 地 址 也 可 以 创建 链接 。 其 方法 是 ， 选 定 文本 
SS 后 选择 【窗口 〗 【属性 】 菜 单 命令 ， 打 开 【 属 性 了 面板， 然后 在 【链接 了 文本 


框 中 直接 输入 链接 文件 名 “关于 我 们 html” 即 可 。 
EGET》 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 添加 的 文本 链接 效果 ， 如 图 6-11 所 示 。 


6-11 ”预览 网 页 


6.2.2 ”案例 2 一 一 添加 图 像 链 接 


使 用 【属性 】 面 板 创建 图 像 链接 的 具体 步骤 如 下 。 

EEC 打开 随 书 光 盘 中 的 ch06\index.html 文件 ， 选 定 要 创建 链接 的 图 像 ， 然 后 单 击 
【属性 】 面 板 中 的 【浏览 文件 】 按 钮 回 ， 如 图 6-12 所 示 。 

EC 弹出 【选择 文件 】 对 话 框 ， 浏 览 并 选择 一 个 文件 ， 在 【相对 于 】 下 拉 列 表 中 选 
择 【 文 档 】 选 项 ， 然 后 单 击 【确定 】 按 钮 ， 如 图 6-13 所 示 。 
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6-12” 选 定 图 像 6-13 【选择 文件 】 对 话 框 


EEDe 在 【属性 】 面 板 的 【目标 】 下 拉 列 表 中 ， 选 择 链接 文档 打开 的 方式 ， 然 后 在 
【 蔡 换 】 文 本 框 中 输入 图 像 的 蔡 换 文本 “美丽 风光 ”， 如 图 6-14 所 示 。 


图 像 ，2TK 。 源 文件 BE) [inetut-2010-135 jg 全 已 交接 中) 美丽 风光 ~ L171 jw- 胜 ET 


瑟 | 册 入 中 | DOMAPT HRBOA Bo [mS 
地 图 加。 | 目标 四 证 
DOY bl ww = 
图 6-14 【属性 】 面 板 
| 
2 与 文本 链接 一 样 ， 也 可 以 通过 直接 输入 链接 地 址 的 方法 来 创建 图 像 链接 。 


6.2.3 ”案例 3 一 一 创建 外 部 链接 


创建 外 部 链接 是 指 将 网 页 中 的 文字 或 图 像 ， 与 站 点 外 的 文档 ， 或 与 Intemet 上 的 网 站 
相连 接 。 
5 创建 外 部 链接 (从 一 个 网 站 的 网 页 链接 到 另 一 个 网 站 的 网 页 ) 时 ， 必 须 使 用 绝 
并 对 路 径 ， 即 被 链接 文档 的 完整 URL 要 包括 所 使 用 的 传输 协议 (对 于 网 页 通常 是 
http://)。 


比如 ， 在 主页 上 添加 网 易 、 搜 狐 等 网 站 的 图 标 ， 将 它们 与 相应 的 网 站 链接 起 来 。 

EEJDp 打开 随 书 光盘 中 的 ch06\index_1.html 文件 ， 选 定 百 度 网 站 图 标 ， 在 【属性 】 面 
板 的 【链接 】 文 本 框 中 输入 百度 的 网 址 http://www.baidu.com， 如 图 6-15 所 示 。 

本 了 BY 保存 网 页 后 按 F12 键 ， 在 浏览 器 中 将 网 页 打开 。 单 击 创建 的 图 像 链 接 ， 即 可 打 
开 百 度 网 站 首页 ， 如 图 6-16 所 示 。 
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图 6-15 【属性 】 面板 图 6-16 预览 网 页 


6.2.4 案例 4 一 一 创建 锚 记 链接 


创建 命名 锚 记 (简称 锚 点 ) 就 是 在 文档 的 指定 位 置 设置 标记 ， 给 该 标记 一 个 名 称 以 便 引用 。 
通过 创建 锚 点 ， 可 以 使 链接 指向 当前 文档 或 不 同文 档 中 的 指定 位 置 。 
EEIDp 打开 随 书 光 盘 中 的 ch06\index.html 文件 。 将 光标 放置 到 要 命名 锚 记 的 位 置 ， 或 
选中 要 为 其 命名 锚 记 的 文本 ， 如 图 6-17 所 示 。 
EC) 在 【插入 】 面 板 中 的 【常用 】 选 项 卡 中 ， 单 击 【 命 名 锚 记 】 按 钮 点 ， 如 图 6-18 
所 示 。 
| 但 | 拆 分 设计 | 实时 入 图 地. 蕊 . 如 5 FB 本 
十 区 酒店 益 久 | 如 会 商 音 训 1 Big 


店 党 识 会 员 登 录 。 陋 客 ”加 入 网 站 - 联系 我 们 
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图 6-17 定位 命名 锚 记 的 位 置 图 6-18 选择 【命名 锚 记 】 按 钮 
ERep 在 弹出 的 【命名 锚 记 】 对 话 框 中 ， 输 入 “Top”， 然 后 单 击 【 确 定 】 按 钮 ， 如 
图 6-19 所 示 。 


3 
-了 提示 选择 【插入 〗】 一 【命名 锚 记 】 菜 单 命令 或 按 CtrlHAltHA 组 合 键 ， 也 可 以 打开 
【命令 锚 记 】 对 话 框 。 


此 时 即 可 在 文档 窗口 中 看 到 在 文档 中 定义 的 错 记 贿 ， 如 图 6-20 所 示 。 
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“酒店 这 识 。 会 员 要 录 博客 加 入 网 站 联系 我 们 


鲁 记 名称: Top 


图 6-19 【命名 锚 记 】 对 话 框 图 6-20 添加 命名 锚 记 


5 在 一 篇 文档 中 ， 锚 记名 称 是 唯一 的 ， 不 允许 在 同一 篇 文档 中 出 现 相 同 的 锚 记 
SS 名称 。 锚 记名 称 中 不 能 含有 空格 ， 而 且 不 应 置 于 层 内 。 锚 记名 称 应 区 分 大 小 写 。 


在 文档 中 定义 了 锚 记 后 ， 只 做 好 了 链接 的 一 半 任务 ， 要 链接 到 文档 中 锚 记 所 在 的 位 置 ， 
还 必须 创建 错 记 链接 。 
创建 错 记 链接 的 具体 操作 步骤 如 下 。 
ET》 在 文档 的 底部 输入 文本 “返回 顶部 ”并 将 其 作为 链接 文字 选中 ， 如 图 6-21 
所 示 。 


6-21 ”选中 链接 的 文字 


EEC 在 【属性 】 面 板 的 【链接 】 文 本 框 中 输入 一 个 字符 符号 # 和 锚 记 名 称 。 比 如 ， 要 
链接 到 当前 文档 中 名 为 Top 的 锚 记 ， 则 输入 “#Top”， 如 图 6-22 所 示 。 


属性 
《> wrmL| ”格式 中) | 段落 四 类 info -BI 于 注 委 茹 标题 mD) 
功 css 五 四 无 ~ 梯 摘 0) #Top 7 全 局。 国内 


| CE 


图 6-22 【属性 】 面板 


Sn 若 要 链接 到 同一 文件 夫 内 其 他 文档 (例如 main.html) 中 名 为 top 的 锚 记 ， 则 应 
输入 “main.html#top”。 同 样 ， 也 可 以 使 用 【属性 】 面 板 中 的 【指向 文件 】〗 图 标 来 
创建 锚 记 链接 。 其 方法 是 ， 单 击 【 属 性 了】 面板 中 的 【指向 文件 】 图 标 饮 ， 然 后 将 
其 拖 至 要 链接 到 的 锚 记 (可 以 是 同一 文档 中 的 锚 记 ， 也 可 以 是 其 他 打开 文档 中 的 锚 
记 ) 上 即 可 。 
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EC 保存 文 要 ， 按 F12 键 在 浏览 器 中 将 网 页 打开 ， 然 后 单 击 网 页 底部 的 “返回 项 


部 ”4 个 字 ， 如 图 6-23 所 示 。 


本 TB> 在 下 浏览 器 中 ， 正 文 的 第 1 行 就 会 出 现在 页 面 顶部 ， 如 图 6-24 所 示 。 
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图 6-23 ”预览 网 页 


图 6-24 返回 页 面 项 部 


6.2.5 “案例 5 一 一 创建 图 像 热点 链接 


在 网 页 中 ， 不 但 可 以 单 击 整 幅 图 像 跳 转 到 链接 文档 ， 也 可 以 单 击 图 像 中 的 不 同 区 域 而 跳 


转 到 不 同 的 链接 文档 。 通 常 将 处 于 一 幅 图 像 上 的 多 个 链接 区 域 称 为 热点 。 热 点 工具 有 3 种 : 
和 矩形 热点 工具 、 椭 圆 形 热 点 工具 和 多 边 形 热点 工具 。 

下 面 通过 实例 介绍 创建 图 像 热 点 链接 的 方法 。 

EC) 打开 随 书 光盘 中 的 ch0Gindex.html 文件 ， 选 中 其 中 的 图 像 ， 如 图 6-25 所 示 。 


ee 这 里 选择 矩形 热点 工具 口 ， 然 后 在 图 像 


a 6-26 所 示 。 


图 6-25 选 定 图 像 


图 6-26 绘制 图 像 热 点 
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莉 BY 在 【属性 】 面 板 的 【链接 】 文 本 框 中 输入 链接 的 文件 ， 即 可 创建 一 个 图 像 热点 
链接 ， 如 图 6-27 所 示 。 


N OV 


图 6-27 【属性 】 面 板 


NN EEC 用 step 01 一 03 的 方法 创建 其 他 的 热点 链接 ， 单 击 【 属 性 】 面 板 上 的 指针 热点 工 
具 民 ， 将 鼠标 指针 恢复 为 标准 箭头 状态 ， 可 在 图 像 上 选取 热点 。 
Sn 被 选中 的 热点 边框 上 将 会 出 现 控 点 ， 拖 动 控 点 可 以 改变 热点 的 形状 。 选 中 热 
点 后 ， 按 Delete 键 可 以 删除 热点 。 在 【属性 】 面 板 中 设置 热点 相对 应 的 URL 链 
接地 址 。 


6.2.6 ”案例 6 一 一 创建 电子 邮件 链接 


电子 邮件 链接 是 一 种 特殊 的 链接 ， 单 击 这 种 链接 ， 会 启动 计算 机 中 相应 的 E-mail 程序 ， 
允许 书写 电子 邮件 ， 然 后 发 往 链接 中 指定 的 邮箱 地 址 。 
创建 电子 邮件 链接 的 具体 操作 步骤 如 下 。 
ECSDp 打开 需要 创建 电子 邮件 链接 的 文档 。 将 光标 置 于 文档 窗口 中 要 显示 电子 邮件 链 
接 的 地 方 (这 里 选择 页 面 底部 )， 选 中 即将 显示 为 电子 邮件 链接 的 文本 或 图 像 ， 然 后 选 
择 【 插 入 】 一 【电子 邮件 链接 】 菜 单 命令 ， 如 图 6-28 所 示 。 


em 在 【插入 了 面板 的 【常用 】 选 项 卡 中 单 击 【电子 邮件 链接 】 按 钮 也 可 以 打开 
慌 。 【电子 邮件 链接 〗 对 话 框 ， 如 图 6-29 所 示 。 


Style css inages.css 


] | ©. 
图 6-28 ”电子 邮件 链接 菜单 图 6-29 【常用 】 选 项 卡 
EEC) 在 弹出 的 【电子 邮件 链接 】 对 话 框 的 【文本 】 文 本 框 中 ， 输 入 或 编辑 作为 电子 
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邮件 链接 显示 在 文档 中 的 文本 ， 在 【电子 邮件 】 文 本 框 中 输入 邮件 送 达 的 E-mail 地 
址 ， 然 后 单 击 【 确 定 】 按 钮 ， 如 图 6-30 所 示 。 
5 到 同样 ， 也 可 以 利用 【属性 了】 面板 创建 电子 邮件 链接 。 其 方法 是 ， 选 中 即将 显 
SS 示 为 电子 邮件 链接 的 文本 或 图 像 ， 在 【属性 】 面 板 的 【链接 】 文 本 框 中 输入 
“mailto:liule2012@163.com”， 如 图 6-31 所 示 。 
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图 6-30 【电子 邮件 链接 】 对 话 框 图 6-31 【属性 】 面 板 


Br 电子 邮件 地 址 的 格式 为 : 用 户 名 @ 主 机 名 (服务 器 提供 商 )。 在 【属性 】 面 板 

”的 【链接 〗 文 本 框 中 输入 电子 邮件 地 址 时 ，mailto: 与 电子 邮件 地 址 之 间 不 能 出 现 
空格 (比如 正确 的 格式 为 mailto:liule2012@163.com)。 

区 于 BY 保存 文档 ， 按 F12 键 在 IE 浏览 器 中 预览 ， 可 以 看 到 电子 邮件 链接 的 效果 ， 如 


图 6-32 所 示 。 
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图 6-32 ”预览 效果 
6.2.7 案例 7 一 一 创建 下 载 文件 的 链接 


下 载 文件 的 链接 在 软件 下 载 网 站 或 源 代码 下 载 网 站 中 应 用 得 较 多 。 其 创建 的 方法 与 一 般 
的 链接 的 创建 方法 相同 ， 只 是 所 链接 的 内 容 不 是 文字 或 网 页 ， 而 是 一 个 软件 。 
创建 下 载 文件 链接 的 具体 操作 步骤 如 下 。 
EDDp 打开 需要 创建 下 载 文件 的 文档 文件 ， 选 中 要 设置 为 下 载 文件 的 链接 的 文本 ， 然 
后 单 击 【 属 性 】 面 板 中 【链接 】 文 本 框 右边 的 【浏览 文件 】 按 钮 辐 ， 如 图 6-33 所 示 。 
EEJ2p 打开 【选择 文件 】 对 话 框 ， 选 择 要 链接 的 下 载 文件 ， 比 如 “酒店 常识 .gt” 文 
件 ， 然 后 单 击 【确定 】 按 钮 ， 即 可 创建 下 载 文件 的 链接 ， 如 图 6-34 所 示 。 
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图 6-33 选择 文本 图 6-34 【选择 文件 】 对 话 框 
6.2.8 ”案例 8 一 一 创建 空 链接 


所 谓 空 链接 ， 是 指 没有 目标 端点 的 链接 。 利 用 空 链接 可 以 激活 文档 中 链接 对 应 的 对 象 和 
文本 。 一 旦 对 象 或 文本 被 激活 ， 就 可 以 为 之 添加 一 个 行为 ， 以 实现 当 光 标 移动 到 链接 上 时 ， 
进行 切换 图 像 或 显示 分 层 等 动作 。 创 建 空 链接 的 具体 步骤 如 下 。 

ECERD 在 文档 窗口 中 ， 选 中 要 设置 为 空 链接 的 文本 或 图 像 ， 如 图 6-35 所 示 。 


6-35 ”选择 图 像 


ECXDy 打开 【属性 】 面 板 ， 然 后 在 【链接 】 文 本 框 中 输入 一 个 “#” 号 ， 即 可 创建 空 链 
接 ， 如 图 6-36 所 示 。 


ER 源 文件 6) -sl14-600<300 ps 命 局 普 换 阅 攻 王 由 宽 o [rx = 
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地 图 0) | 目标 @8) 

RJOOVY Em 


6-36 【属性 】 面 板 


. 
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6.2.9 ”案例 9 一 一 创建 脚本 链接 


脚本 链接 是 另 一 种 特殊 类 型 的 链接 ， 通 过 单 击 带 有 脚本 链接 的 文本 或 对 象 ， 可 以 运行 相 
应 的 脚本 及 函数 (JavaScript 和 VBScript 等 )， 从 而 为 浏览 者 提供 许多 附加 的 信息 。 脚 本 链接 还 
可 以 被 用 来 确认 表单 。 创 建 脚本 链接 的 具体 步骤 如 下 。 
EEJDp 打开 需要 创建 脚本 链接 的 文档 ， 选 择 要 创建 脚本 链接 的 文本 、 图 像 或 其 他 对 
象 ， 这 里 选中 文本 “酒店 加 盟 ”， 如 图 6-37 所 示 。 
ECEDp 在 【属性 】 面 板 的 【链接 】 文 本 框 中 输入 “JavaScript: ”， 接 着 输入 相应 的 
JavaScript 代码 或 函数 ， 比 如 输入 “window.close0”， 表 示 关 闭 当前 窗口 ， 如 图 6-38 
所 示 。 


阅 落 酮 喇 习 手 涉 一 一 器 伴 壬 叶 习 持 忆 


图 6-37 选择 文本 图 6-38 输入 脚本 代码 
[| 
Ze 在 代码 javascript:window.close 0 中 ， 括 号 内 不 能 有 空格 。 


ETEY 保存 网 页 ， 按 F12 键 在 IE 浏览 器 中 将 网 页 打开 ， 如 图 6-39 所 示 。 单 击 创建 的 脚 
本 链接 文本 ， 会 弹出 一 个 对 话 框 ， 单 击 【是 】 按 钮 ， 将 关闭 当前 窗口 ， 如 图 6-40 
所 示 。 


430: 光山 才 守 ,天波 ,无 - 扫 泊 ， 忆 拓 了 9 和 Be 您 各 看 的 网 页 正在 涝 置 关闭 法 项 卡 ， 


是 否 关闭 此 运 项 卡 ? 


a es) 


图 6-39 预览 网 页 图 6-40 ”提示 信息 框 
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Sn JPG 格式 的 图 片 不 支持 脚本 链接 ， 如 果 要 为 图 像 添加 脚本 链接 ， 则 应 先 将 图 
鲸 像 转换 为 GIF 格式 。 


6.3 ”案例 10 一 一 链接 的 检查 


当 创 建 好 一 个 站 点 之 后 ， 由 于 一 个 网 站 中 的 链接 数量 很 多 ， 因 此 在 上 传 服务 器 之 前 ， 必 
须 先 检查 站 点 中 的 所 有 链接 ， 以 免 出 现 链接 错误 。 

在 Dreamweaver CS6 中 ， 可 以 快速 检查 站 点 中 网 页 的 链接 的 具体 步骤 如 下 。 

EEIDp 在 Dreamweaver 中 ， 选 择 【 站 点 】 一 【检查 站 点 范围 的 链接 】 菜 单 命 令 ， 此 时 
会 激活 链接 检查 器 ， 如 图 6-41 所 示 。 
EEIPp 从 【属性 】 面 板 左 上 角 的 【显示 】 下 拉 列 表 中 可 以 选择 【 断 掉 的 链接 】、【 外 


部 链接 】 或 【孤立 的 文件 】 等 选项 。 比 如 选取 【孤立 的 文件 】 选 项 ，Dreamweaver CS6 
ka 并 且 会 将 孤立 的 文件 列表 显示 出 来 ， 如 图 6-42 所 示 。 


图 6-41 检查 站 点 范围 的 链接 图 6-42 ”链接 检查 器 


EEJsp 对 于 有 问题 的 文件 ， 直 接 双 击 鼠 标 左 键 ， 即 可 将 其 打开 进行 修改 。 
为 网 页 建立 的 链接 要 经 常 检查 ， 因 为 一 个 网 站 都 是 由 多 个 页 面 组 成 的 ， 一 旦 出 现 空 链接 
或 链接 错误 的 情况 ， 就 会 对 网 站 的 形象 造成 不 好 的 影响 。 


6.4 ”实战 演练 一 一 为 企业 网 站 添加 友情 链接 


使 用 链接 功能 可 以 为 企业 网 站 添加 友情 链接 ， 有 具体 的 操作 步骤 如 下 。 

ET 打开 光盘 中 的 choGiindex html 文件 。 在 页 面 底部 输入 需要 添加 的 友情 链接 名 
称 ， 如 图 6-43 所 示 。 

EEIPp 这 里 选中 “百度 ”文件 ， 在 下 方 的 属性 框 中 的 【链接 】 文 本 框 中 输入 
“www.baidu.com”， 如 图 6-44 所 示 。 


四 
全 i 


6-43 ”输入 友情 链接 文本 图 6-44 添加 链接 地 址 
ECJB 重复 02 步骤 的 操作 ， 选 中 其 他 文字 ， 并 为 这 些 文件 添加 链接 ， 如 图 6-45 所 示 。 


EC 保存 文档 ， 按 F12 键 在 IE 浏览 器 中 预览 效果 。 单 击 其 中 的 链接 ， 即 可 打开 相应 
的 网 页 ， 如 图 6-46 所 示 。 


蒂 汶 柄 昼 司 于 沪 一 一 蝇 了 康 壬 喇 避 笑 引 册 9 小 


图 6-45 添加 其 他 文本 的 链接 地 址 图 6-46 ”预览 网 页 


6.5” 跟 我 练 练 手 
6.5.1 练习 目标 
能 够 熟练 掌握 本 章节 所 讲 内 容 。 


6.5.2 上 机 练习 


练习 1: 在 网 页 添加 超 链接 。 
练习 2: 链接 的 检查 。 
练习 3: 为 企业 网 站 添加 超 链接 。 

6.6 高 手 甜 点 


甜点 1: 如 何在 Dreamweaver 中 去 除 网 页 中 链接 文字 下 面 的 下 划 线 ? 
在 完成 网 页 中 的 链接 制作 之 后 ， 系 统 往往 会 自动 在 链接 文字 的 下 面 添 加 一 条 下 划 线 ， 用 
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来 标示 该 内 容 包含 超级 链接 。 当 一 个 网 页 中 的 链接 较 多 时 ， 就 会 显得 杂乱 ， 因 此 有 时 就 需要 
去 除 超 级 链接 。 其 具体 操作 方法 是 ， 在 设置 页 面 属性 中 “链接 ”选项 卡 下 的 “水 平 线 样式 ” 
下 拉 列 表 中 ， 选 择 “ 始 终 无 下 划 线 ”选项 ， 即 可 去 除 网 页 中 链接 文字 下 面 的 下 划 线 。 


甜点 2: 在 为 图 像 设置 热点 链接 时 ， 为 什么 之 前 为 图 像 设 置 的 普通 链接 无 法 使 用 呢 ? 


一 张 图 像 只 能 选择 创建 普通 链接 或 热点 链接 。 如 果 同 一 张 图 像 在 创建 了 普通 链接 后 再 创 
建 热点 链接 ， 则 普通 链接 会 无 效 ， 只 有 热点 链接 是 有 效 的 。 


比如 打 


验证 表单 等 ， 这 些 就 是 网 页 行为 。 本 章 将 要 介绍 的 内 容 是 ， 如 何 使 


用 网 页 表单 和 行为 。 


些 动作 ， 


言 实现 一 些 


很 多 网 站 都 有 申请 注册 会 员 或 邮箱 的 模块 ， 这 些 模 块 都 是 通过 添加 网 页 表单 来 
完成 的 。 另 外 ， 设 计 人 员 在 设计 网 页 时 ， 需 要 使 用 编程 语言 
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7.1 在 网 页 中 插入 表单 元 素 


表单 用 于 把 来 自用 户 的 信息 提交 给 服务 器 ， 是 网 站 管理 者 与 浏览 者 之 间 进 行 沟通 的 桥 
梁 。 利 用 表单 处 理 程序 ， 可 以 收集 、 分 析 用 户 的 反馈 意见 ， 使 网 站 管理 者 对 完善 网 站 建设 做 
出 科学 、 合 理 的 决策 。 因 此 ， 表 单 是 决定 网 站 是 否 成 功 的 重要 因素 。 


7.1.1 案例 1 一 一 插入 表单 域 


每 一 个 表单 中 都 含有 表单 域 和 若干 个 表单 元 素 ， 而 所 有 的 表单 元 素 又 都 要 放 在 表单 域 中 

才 会 生效 ， 因 此 ， 制 作 表单 时 要 先 插入 表单 域 。 

在 文档 中 插入 表单 域 的 具体 操作 步骤 如 下 。 

EC 将 光标 放置 在 要 插入 表单 域 的 位 置 ， 选 择 【插入 】 一 【表单 】 一 【表单 】 菜 单 
命令 ， 如 图 7-1 所 示 。 


| 要 插入 表单 域 ， 也 可 以 在 【插入 】 面 板 的 【表单 〗 选 项 卡 中 单 击 【 表 单 】 
NS 按钮 。 


EEIPy 插入 表单 域 后 ， 页 面 上 会 出 现 一 条 红色 的 虚线 ， 如 图 7-2 所 示 。 
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图 7-1 选择 【表单 】 菜 单 命令 图 7-2 插入 的 表单 域 


ET 选中 表单 域 ， 或 在 标签 选择 器 中 选择 EeeagEerml3 标 签 ， 即 可 在 表单 的 【属性 】 
面板 中 设置 ， 如 图 7-3 所 示 。 


于 素 单 也 动作 | | 局 本 中 ~ 卖 C 无 下 
= 一 tom 方法 Pos1 - 编 间 类型 - 


7-3 【属性 】 面 板 
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7.1.2 案例 2 一 一 插入 文本 域 


根据 不 同 的 type 属性 ， 文 本 域 可 分 为 3 种 : 单行 文本 域 、 多 行文 本 域 和 密码 域 。 

选择 【插入 】 一 【表单 】 一 【文本 域 】 菜 单 命令 ， 或 在 【插入 】 面 板 的 【表单 〗】 选 项 卡 
中 单 击 【文本 字段 】 按 钮 和 【文本 区 域 】 按 钮 ， 都 可 以 在 表单 域 中 插入 文本 域 ， 如 图 7-4 
所 示 。 


过 尘 闪 李 潭 罚 恒 洒 疹 一 一 订 | 


图 7-4 在 网 页 中 插入 文本 域 


7.1.3 ”案例 3 一 一 插入 单行 文本 域 


单行 文本 域 通常 提供 单字 或 短语 响应 ， 比 如 姓名 或 地 址 等 。 
选择 【插入 】 一 【表单 】 一 【文本 域 】 菜 单 命令 ， 或 在 【插入 】 面 板 的 【表单 】 选 项 卡 
中 单 击 【文本 字段 】 按 钮 ， 即 可 插入 单行 文本 域 ， 如 图 7-5 所 示 。 
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图 7-5 插入 单行 文本 域 


SR 插入 文本 域 后 ， 只 要 在 【属性 】 面板 中 将 【类 型 】 选 择 为 【单行 】 类 型 ， 印 
SS 。 可 将 插入 的 文本 域 变 为 单行 文本 域 。 
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7.1.4 案例 4 一 一 插入 多 行文 本 域 


选择 【插入 】 一 【表单 】 一 【文本 区 域 】 菜 单 命令 ,或 在 【插入 】 面 板 的 【表单 】 选 项 


卡 中 单 击 【 文 本 区 域 】 按 钮 ， 即 可 插入 多 行文 本 域 ， 如 图 7-6 所 示 。 


图 7-6 插入 多 行文 本 域 


插入 文本 域 后 ， 只 要 在 【属性 】〗 面 板 中 将 【类 型 〗 选 择 为 【多 行 〗 类 型 ， 即 
可 将 插入 的 文本 域 变 为 多 行文 本 域 。 多 行文 本 域 可 为 访问 者 提供 一 个 较 大 的 区 


域 ， 供 其 输入 响应 ， 还 可 以 指定 访问 者 最 多 可 输入 的 行 数 以 及 对 象 的 字符 宽度 。 
如 果 输入 的 文本 超过 了 这 些 限制 ， 该 域 将 按照 换行 属性 中 指定 的 设置 进行 滚动 。 


案例 5 一 一 插入 密码 域 


密码 域 是 特殊 类 型 的 文本 域 。 当 用 户 在 密码 域 中 输入 文本 信息 时 ， 所 输入 的 文本 会 被 蔡 
换 为 星 号 或 项 目 符号 以 隐藏 该 文本 ， 从 而 保护 这 些 信息 不 被 他 人 看 到 ， 如 图 7-7 所 示 。 

当 插 入 文本 域 之 后 ， 在 【属性 】 面 板 中 选中 【类 型 】 选 项 组 中 的 【密码 】 单 选 按钮 ， 即 
可 插入 密码 域 ， 如 图 7-8 所 示 。 
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图 7-8 选中 【密码 】 单 选 按钮 


7.2 在 网 页 中 插入 复 选 框 和 单 选 按钮 


复 选 框 允许 在 一 组 选项 中 选择 多 个 选项 ， 用 户 可 以 选择 任意 多 个 适用 的 选项 。 单 选 按钮 
代表 互相 排斥 的 选择 。 在 某 个 单 选 按钮 组 (由 两 个 或 多 个 共享 同一 名 称 的 按钮 组 成 ) 中 选择 一 
个 选项 ， 就 会 取消 对 该 组 中 其 他 所 有 选项 的 选择 。 


7.2.1 案例 6 一 一 插入 复 选 框 


如 果 要 从 一 组 选项 中 选择 多 个 选项 ， 则 可 使 用 复 选 框 功能 。 使 用 以 下 两 种 方法 可 以 插入 
复 选 框 。 

(1) 选择 【插入 】 一 【表单 】 一 【 复 选 框 】 菜 单 命令 ， 如 图 7-9 所 示 。 

(2) 单 击 【 插 入 】 面 板 【 表 单 】 选 项 卡 中 的 【 复 选 框 】 按 钮 回 ， 如 图 7-10 所 示 。 


图 7-9 选择 【 复 选 框 】 菜 单 命令 图 7-10 单 击 【 复 选 框 】 按 钮 


若 要 为 复 选 框 添加 标签 ， 可 在 该 复 选 框 的 旁边 单 击 ， 然 后 输入 标签 文字 即 可 ， 如 图 7-11 
所 示 。 另 外 ， 选 中 【 复 选 框 】 喉 ， 在 【属性 】 面 板 中 可 以 设置 其 属性 ， 如 图 7-12 所 示 。 


Dw EE = 
0 sD) EV) AD RIM) iol S(O WA SOW mm 


,RR 

Eom oy | 回回 口 | 外 口 | 又 台 加 避 本 回 
Cr i 
ET CE 


和 的 爱好 bh ear 

EE ESR 
Snir Cota 
二 二 
全 号 


EE 
同 2 isEWL | 本 局 已 多 过 站 类 C) 无 
rhe 加 不 寺中 人 


图 7-11 输入 复 选 框 的 标签 文字 图 7-12 复 选 框 【属性 】 面 板 | 
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7.2.2 案例 7 一 一 插入 单 选 按钮 


如 果 从 一 组 选项 中 只 能 选择 一 个 选项 ， 则 需要 使 用 单 选 按 钮 功能 。 选 择 【 插 入 】 一 【 表 
单 】 一 【 单 选 按钮 】 菜 单 命令 ， 即 可 插入 单 选 按钮 。 


本 本 通过 单 击 【 插 入 了 面板 【表单 】 选 项 卡 中 的 【 单 选 按钮 】 按 钮 回 ， 也 可 以 插 
SS 。 入 单 选 按钮 。 


7-13 所 示 。 选 中 单 选 按钮 号 ， 在 【属性 】 面 板 中 可 为 其 设置 属性 ， 如 图 7-14 所 示 。 


Er [=isL x 
NA aH EDV WA WM) Neo) lO aly 本 DIM Wee 
| 2 eon Weerteatewg z2 85 


NN 若 要 为 单 选 按钮 添加 标签 ， 可 在 该 单 选 按钮 的 旁边 单 击 ， 然 后 输入 标签 文字 即 可 ， 如 
NN 图 


图 7-13 输入 单 选 按钮 标签 文字 图 7-14 单 选 按钮 属性 面板 


7.3 制作 网 页 列表 和 菜单 


表单 中 有 两 种 类 型 的 菜单 : 一 种 是 单 击 时 下 拉 的 菜单 ， 称 为 下 拉 菜单 ; 另 一 种 则 显示 为 


一 个 列 有 项 目的 可 滚动 列表 ， 用 户 可 从 该 列表 中 选择 项 目 ， 被 称 为 滚动 列表 ， 如 图 7-15 所 示 
分 别 是 下 拉 菜 单 域 和 滚动 列表 。 


| [ 所 县 新 闻 


| 娱乐 新 闻 三 
E25 ”| | 体育 新 闻 思 


图 7-15 列表 与 菜单 
7.3.1 案例 8 一 一 插入 下 拉 菜 单 
创建 下 拉 菜 单 的 具体 步骤 如 下 。 
EC 选择 【插入 】 一 【表单 】 一 【选择 (列表 /菜单 )】 菜 单 命令 ， 即 可 插入 列表 / 菜 
单 ， 然 后 在 其 【属性 】 面 板 中 ， 在 【类 型 】 选 项 组 中 选中 【菜单 】 单 选 按钮 ， 如 
图 7-16 所 示 。 


EEJ29 单 击 【列表 值 】 按 钮 ， 在 打开 的 对 话 框 中 进行 相应 的 设置 ， 如 图 7-17 所 示 。 


Be 
国人 EE Ce -| 

ba 口 列 虽 0) 和 57 辐 门 泡 这 连 如 
HM 


图 7-16 ”选择 属性 面板 图 7-17 【列表 值 】 对 话 框 i 

区 BY 单 击 【确定 】 按 钮 ， 在 【属性 】 面 板 的 【初始 化 时 选 定 】 文 本 框 中 选择 【体育 ”使 

新 闻 】 选 项 ， 如 图 7-18 所 示 。 

ES 保存 文 要 ， 按 F12 键 在 正 浏览 器 中 预览 效果 ， 如 图 7-19 所 示 。 要 

单 

. ‘ 
四 

Se 时 
图 7-18 选择 初始 化 时 选 定 的 菜单 图 7-19 ”预览 效果 


7.3.2 ”案例 9 一 一 插入 滚动 列表 


创建 滚动 列表 的 具体 步骤 如 下 。 

EC 选择 【插入 】 一 【表单 】 一 【选择 (列表 /菜单 )】 菜 单 命令 ， 插 入 列表 /菜单 ， 然 
后 在 其 【属性 】 面 板 中 ， 在 【类 型 】 选 项 组 中 选中 【列表 】 单 选 按钮 ， 并 将 其 【高 
度 】 设 置 为 3， 如 图 7-20 所 示 。 


图 7-20 选择 属性 面板 


EEC 单 击 【列表 值 】 按 钮 ， 在 打开 的 对 话 框 中 进行 相应 的 设置 ， 如 图 7-21 所 示 。 
单 击 【 确 定 】 按 钮 保存 文档 ， 按 F12 键 在 正 浏览 器 中 预览 效果 ， 如 图 7-22 所 示 。 


Lo re 


图 7-21 【列表 值 】 对 话 框 图 7-22 预览 效果 
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7.4 在 网 页 中 插入 按钮 


按钮 对 于 表单 来 说 是 必 不 可 少 的 ， 无 论 用 户 对 表单 进行 了 什么 操作 ， 只 要 不 单 击 【 提 
交 】 按 钮 ， 服 务 器 与 客户 之 间 就 不 会 有 任何 交互 操作 。 


7.4.1 案例 10 一 一 插入 按钮 


NN 将 光标 放 在 表单 内 ， 选 择 【 插 入 】 一 【表单 】 一 【按钮 】 菜 单 命令 ， 即 可 插入 按钮 ， 如 
NN 图 7-23 所 示 。 


选中 表单 按钮 滔 嘴 ， 即 可 在 打开 的 【属性 】 面 板 中 设置 按钮 名 称 、 值 、 动 作 和 类 等 属 
性 ， 如 图 7-24 所 示 。 


ai NJ | 


图 7-23 ”插入 按钮 图 7-24 设置 按钮 的 属性 


7.4.2 案例 11 一 一 插入 图 像 按钮 


在 HTML5 中 ， 可 以 使 用 图 像 作为 按钮 图 标 。 如 果 要 使 用 图 像 来 执行 任务 而 不 是 提交 数 
据 ， 则 只 需 将 某 种 行为 附加 到 表单 对 象 上 即 可 。 


打开 随 书 光盘 中 的 cho7\ 图 像 按钮 html 文件 ， 如 图 7-25 所 示 。 
ET 将 光标 置 于 第 4 行 单元 格 中 ， 选 择 【插入 】- 【表单 】 一 【图 像 域 】 菜 单 全 


令 ， 或 拖 动 【 插 入 】 面 板 【 表 单 】 选 项 卡 中 的 【图 像 域 】 按 钮 国 ， 弹 出 【选择 图 像 
源 文件 】 对 话 框 ， 如 图 7-26 所 示 。 


?GG RO Glo% ~ 加 


7-25 ”打开 素材 文件 7-26 【选择 图 像 源 文件 】 对 话 杠 
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EC) 在 【选择 图 像 源 文 件 】 对 话 框 中 选中 图 像 ， 然 后 单 击 【确定 】 按 钮 ， 即 可 插入 

图 像 域 ， 如 图 7-27 所 示 。 

EEC 选中 该 图 像 域 ， 打 开 其 【属性 】 面 板 ， 设 置 图 像 域 的 属性 ， 这 里 采用 默认 设 
置 ， 如 图 7-28 所 示 。 


示 . 岗 汉 开导 Wichon 玫 从 二 html0HTMU* 。 - 口 X 


CD 本 G) inveod/ 概 计 Jre 。 品 对 齐 QJ | 内 。 ”| 共 加 而 
Bory bib 2 


DerycaRinoat. [AS ho vv 可 同 国 
图 7-27 插入 图 像 域 图 7-28 图 像 区 域 属性 面板 


TB> 完成 设置 后 保存 文档 ， 按 F12 键 在 下 浏览 器 中 预览 效果 ， 如 图 7-29 所 示 。 


半 尘 普 醋 涡 恒 习 于 疹 一 一 漂 出 起 占 喇 习 六 好 /小 日 


IGG 


图 7-29 ”预览 效果 


7.5 添加 网 页 行为 


行为 是 由 对 象 、 事 件 和 动作 构成 的 。 对 象 是 产生 行为 的 主体 ， 事 件 是 触发 动态 效果 的 原 
因 ， 动 作 是 指 最 终 需 要 完成 的 动态 效果 。 本 节 就 来 介绍 一 下 如 何 为 网 页 添加 行为 。 


7.5.1 案例 12 打开 【行为 】 面 板 Se 


==] 当 如 一 


在 Dreamweaver CS6 中 ， 对 行为 的 添加 和 控制 主要 是 通过 【 行 
为 】 面 板 来 实现 的 。 选 择 【 窗 口 】 一 【行为 】 菜 单 命 令 ， 即 可 打开 
【行为 】 面 板 ， 如 图 7-30 所 示 。 

使 用 【行为 】 面 板 可 以 将 行为 附加 到 页 面 元 素 ， 并 且 可 以 修改 以 
前 所 附加 的 行为 的 参数 。 

【行为 】 面 板 中 包含 以 下 一 些 选项 行为 。 


图 7-30 【行为 】 面板 
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(1) 单 击 二 按钮， 可 弹出 动作 菜单 ， 从 中 可 以 添加 行为 。 添 加 行为 时 ， 只 需 从 动作 菜单 
中 选择 一 个 行为 项 即 可 。 当 从 该 动作 菜单 中 选择 一 个 动作 时 ， 将 出 现 一 个 对 话 框 ， 可 以 在 此 
对 话 框 中 指定 该 动作 的 参数 。 如 果 动 作 菜 单 上 的 所 有 动作 都 处 于 灰 显 状态 ， 则 表示 选 定 的 元 
素 无 法 生成 任何 事件 。 

(2) 单 击 = 按钮 ， 可 从 行为 列表 中 删除 所 选 的 事件 和 动作 。 

(3) 单 击 全 按钮 或 按钮， 可 将 动作 项 向 前 移 或 向 后 移动 ， 从 而 改变 动作 执行 的 顺序 。 
对 于 不 能 在 列表 中 上 下 移动 的 动作 ， 箭 头 按钮 则 处 于 禁用 状态 。 


Sn 使 用 ShifttF4 快捷 键 在 为 选 定 对 象 添加 了 行为 之 后 ， 就 可 以 利用 行为 的 事件 
NN A 。 列表 ， 选 择 触发 该 行为 的 事件 ， 打 开 【行为 了 面板 。 
7.5.2 ”案例 13 一 一 添加 行为 


在 Dreamweaver CS6 中 ， 可 以 为 文档 、 图 像 、 链 接 和 表单 等 任何 网 页 元 素 添加 行为 。 在 
给 对 象 添 加 行为 时 ， 可 以 一 次 为 每 个 事件 添加 多 个 动作 ， 并 按 【 行 为 】 面 板 中 的 动作 列表 的 
顺序 来 执行 动作 。 添 加 行为 的 具体 步骤 如 下 。 
EEJDp 在 网 页 中 选 定 一 个 对 象 ， 也 可 以 单 击 文档 窗口 左下 角 的 <body> 标 签 选中 整个 页 
面 ， 然 后 选择 【窗口 】 一 【行为 】 菜 单 命令 ， 打 开 【 行 为 】 面 板 ， 单 击 +- 按 钮 ， 弹 
出 动作 菜单 ， 如 图 7-31 所 示 。 
臣 2 从 弹出 的 动作 菜单 中 选择 一 种 动作 ， 会 弹出 相应 的 参数 设置 对 话 框 (此 处 选择 
“弹出 信息 ”命令 )。 在 其 中 进行 设置 后 单 击 【 确 定 】 按 钮 ， 随 即 ， 在 事件 列表 中 会 
显示 动作 的 默认 事件 。 单 击 该 事件 ， 会 出 现 一 个 四 按钮 ， 单 击 加 按钮 ， 即 可 弹出 包 
含 全 部 事件 的 事件 列表 ， 如 图 7-32 所 示 。 


标签 检 音 器 
属性 标签 cbody> 


拖 动 Ap 元 素 
改变 履 性 

效 梭 » 
显示 -他 这 元 素 
检查 活 件 

检查 要 塌 


设置 文 志 上 
调用 JavaScript 
Ed 


串扰 洒 间 开始 
转 到 URL 
预先 效 入 轿 你 


到 到 更 会 行为 … 


图 7-31 动作 菜单 图 7-32 动作 事件 
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7.6 ”常用 行为 的 应 用 


Dreamweaver CS6 内 置 有 许多 行为 ， 每 一 种 行为 都 可 以 实现 一 个 动态 效果 ， 或 用 户 与 网 
页 之 间 的 交互 。 


7.6.1 案例 14 一 一 交换 图 像 


使 用 【交换 图 像 】 动 作 ， 通 过 更 改 图 像 标签 的 sre 属性 ， 可 将 一 个 图 像 与 另 一 个 图 像 进行 
交换 。 使 用 此 动作 可 以 创建 鼠标 经 过 图 像 和 其 他 的 图 像 效 果 (包括 一 次 交换 多 个 图 像 )。 
创建 【交换 图 像 】 动 作 的 具体 步骤 如 下 。 
打开 随 书 光盘 中 的 cho7\ 应 用 行为 index html 文件 ， 如 图 7.33 所 示 。 
ET 选择 【窗口 一 【行为 】 菜单 命令 ， 打 开 【 行 为 】 面 板 。 选 中 图 像 ， 单 击 *, 按 
钮 ， 在 缠 出 的 菜单 中 远 择 【交换 图 像 】 命令 ， 如 图 7.34 所 示 。 


拖 动 Ap 元 素 
改变 属性 

效果 

野 示 - 隐 蕊 元 素 
袜 杏 活 件 


图 7-33 ”打开 素材 文件 图 7-34 选择 【交换 图 像 】 命 令 


区 BY 弹出 【交换 图 像 】 对 话 框 ， 如 图 7-35 所 示 。 
EGG 单 击 浏览 按钮 BE ]， 弹 出 【选择 图 像 源 文件 】 对 话 框 ， 从 中 选择 一 幅 图 像 ， 
如 图 7-36 所 示 。 


全 好 机 


回 对 半生 当 
团 各 号 天 时 贷 复 亚 多 


图 7-35 【交换 图 像 】 对 话 框 图 7-36 【选择 图 像 源 文 件 】 对 话 框 


[es 


过 站 尖 忆 订 淹 习 沽 党 一 一 潭 由 时 回 河 习 所 山名 
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EECD 单 击 【 确 定 】 按 钮 ， 返 回 【 交 换 图 像 】 对 话 框 ， 如 图 7-37 所 示 。 
EEJD 单 击 【确定 】 按 钮 ， 添 加 【交换 图 像 】 行 为 ， 如 图 7-38 所 示 。 


记 让 原 的 村 为 ，ime/ 001, Jpe 


网 预先 吉 和 到 你 
加 入 标 沽 元 时 处 复 本 像 


图 7-37 设置 原始 图 像 图 7-38 添加 【交换 图 像 】 行 为 
| ET 保存 文档 ， 按 F12 键 在 IE 浏览 器 中 预览 效果 ， 如 图 7-39 所 示 。 


Lum -E02 


nde 
EDR EE 
EA 


2 OR SILES 


图 7-39 ”预览 效果 
7.6.2 ”案例 15 一 一 弹出 信息 


使 用 【弹出 信息 】 动 作 可 显示 一 个 带 有 指定 信息 的 JavaScript 警告 。 因 为 JavaScript 警告 
只 有 一 个 【确定 】 按 钮 ， 所 以 使 用 此 动作 可 以 提供 信息 ， 而 不 能 为 用 户 提供 选择 。 
使 用 【弹出 信息 】 动 作 的 具体 步骤 如 下 。 
打开 光盘 中 的 ch07\ 应 用 行为 index.html 文件 ， 如 图 7-40 所 示 。 
EDy 单 击 文档 窗口 状态 栏 中 的 <body> 标 签 ， 选 择 【 窗 口 】 一 【行为 】 菜 单 命令 ， 打 
开 【 行 为 】 面 板 。 单 击 【行为 】 面 板 中 的 十 -按钮 ， 在 弹出 的 菜单 中 选择 【弹出 信 
息 】 命 令 ， 如 图 7-41 所 示 。 


二 
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标 符 检 查 器 
| 属性 [行为 | 标签 oay> 
| = 


图 7-41 选择 【弹出 信息 】 命 令 


葬 于 BY 弹出 【弹出 信息 】 对 话 框 ， 在 【消息 】 文 本 框 中 输入 要 显示 的 信息 “欢迎 你 的 
光临 ”， 如 图 7-42 所 示 。 

EEJZp 单 击 【确定 】 按 钮 ， 添 加 行为 ， 并 设置 相应 的 事件 ， 如 图 7-43 所 示 。 

葬 于 BY 保存 文档 ， 按 F12 键 在 正 浏览 器 中 预览 效果 ， 如 图 7-44 所 示 。 


图 7-42 【弹出 信息 】 对 话 框 图 7-43 添加 行为 事件 图 7-44 ”信息 提示 框 
7.6.3 ”案例 16 一 一 打开 浏览 器 窗口 


使 用 【打开 浏览 器 窗口 】 动 作 可 以 在 一 个 新 的 窗口 中 打开 URL， 可 以 指定 新 窗口 的 属性 
(包括 其 大 小 )、 特 性 (是 否 可 以 调整 大 小 、 是 否 具有 菜单 栏 等 ) 和 名 称 。 

使 用 【打开 浏览 器 窗口 】 动 作 的 具体 步骤 如 下 。 

打开 光盘 中 的 ch07\ 应 用 行为 index.html 文件 ， 如 图 7-45 所 示 。 

EDUD) 选择 【窗口 】 一 【行为 】 菜 单 命令 ， 打 开 【 行 为 】 面 板 。 单 击 该 面板 中 的 国 9 按 
钮 ， 在 弹出 的 菜单 中 选择 【打开 浏览 器 窗口 】 命 令 ， 如 图 7-46 所 示 。 

EECe) 弹出 【打开 浏览 器 窗口 】 对 话 框 ， 在 【要 显示 的 URL)】 文本 框 中 输入 在 新 窗口 
中 载 入 的 目标 URL 地 址 (可 以 是 网 页 ， 也 可 以 是 图 像 ); 或 单 击 【要 显示 的 URL】 文 
本 框 右 侧 的 【浏览 】 按 钮 ， 弹 出 【选择 文件 】 对 话 框 ， 如 图 7-47 所 示 。 
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EC 在 【选择 文件 】 对 话 框 中 选择 文件 ， 单 击 【确定 】 按 钮 ， 将 其 添加 到 文本 杠 
中 ， 然 后 将 【窗口 宽度 】 和 【窗口 高 度 】 分 别 设置 为 380 和 350， 在 【窗口 名 称 】 
文本 框 中 输入 “弹出 窗口 ”， 如 图 7-48 所 示 。 


7-46 选择 要 添加 的 行为 


要 显示 的 URL， ing/01. jpg DG] .= 
人 = 克 要 3580 于 口 硬 要 350 本 二 


硬性 门 号 新 工具 器 sg 
日 8 愉 工 具 侨 站 委 要 对 使 用 这 功名 


SRA) el RS wse 回 油 整 大 小 手 梢 
本 二 生 品 名称 ， 弹 叶 面 品 
他 十 。。 区 者 了 im br 
中 和 
图 7-47 【选择 文件 】 对 话 框 7-48 【打开 浏览 器 窗口 】 对 话 框 


在 【打开 浏览 器 窗口 】 对 话 框 中 ， 各 部 分 的 含义 如 下 。 

® 【窗口 宽度 】 和 【窗口 高 度 】 文 本 框 : 用 于 指定 窗口 的 宽度 和 高 度 (以 像素 为 单位 )。 

@ 【导航 工具 栏 】 复 选 框 : 浏览 器 窗口 的 组 成 部 分 ， 包 括 【 后 退 】、【 前 进 】、【 主 
页 】 和 【重新 载 入 】 等 按钮 。 

@ 【地 址 工具 栏 】 复 选 框 :浏览 器 窗口 的 组 成 部 分 ， 包 括 【 地 址 】 文 本 框 等 。 

e 【状态 栏 】 复 选 框 :位 于 浏览 器 窗口 的 底部 ， 在 该 区 域 中 显示 消息 (比如 剩余 的 载 入 
时 间 以 及 与 链接 关联 的 URL)。 

® 【菜单 条 】 复 选 框 : 浏览 器 窗口 上 显示 菜单 (比如 文件 、 编 辑 、 查 看 、 转 到 和 帮助 等 
菜单 ) 的 区 域 。 如 果 要 让 访问 者 能 够 从 新 窗口 导航 ， 用 户 应 该 选中 此 复 选 框 。 如 果 撤 
选 此 复 选 框 ， 在 新 窗口 中 用 户 只 能 关闭 或 最 小 化 窗口 。 

e 【需要 时 使 用 滚动 条 】 复 选 框 : 用 于 指定 如 果 内 容 超 出 可 视 区 域 时 将 显示 滚动 条 。 
如 果 撤 选 此 复 选 框 ， 则 不 显示 滚动 条 。 如 果 【 调 整 大 小 手柄 】 复 选 框 该 功能 也 会 被 
撤 选 ， 访 问 者 将 很 难看 到 超出 窗口 大 小 以 外 的 内 容 (虽然 他 们 可 以 拖 动 窗口 的 边缘 使 
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窗口 滚动 )。 

e@ 【调整 大 小 手柄 】 复 选 框 : 用 于 指定 应 该 能 够 调整 窗口 的 大 小 。 方 法 是 拖 动 窗口 的 
右 下 角 或 单 击 右 上 角 的 最 大 化 按钮 。 如 果 撤 选 此 复 选 框 ， 调 整 大 小 控件 将 不 可 用 ， 
右 下 角 也 不 能 拖 动 。 

e 【窗口 名 称 】 文 本 框 : 新 窗口 的 名 称 。 如 果 用 户 要 通过 JavaScript 使 用 链接 指向 新 
窗口 或 控制 新 窗口 ， 则 应 该 对 新 窗口 命名 。 此 名 称 不 能 包含 空格 或 特殊 字符 。 

EEJDp 单 击 【 确 定 】 按 钮 ， 添 加 行为 ， 并 设置 相应 的 事件 ， 如 图 7-49 所 示 。 

攻 于 保存 文档 ， 按 F12 键 在 下 浏览 器 中 预览 效果 ， 如 图 7-50 所 示 。 


图 7-49 设置 行为 事件 图 7-50 预览 效果 


7.6.4 ”案例 17 一 一 检查 表单 行为 


在 包含 表单 的 页 面 中 填写 相关 信息 时 ， 当 信息 填写 出 错时 ， 系 统 会 自动 显示 出 错 信息 ， 
这 是 通过 检查 表单 来 实现 的 。 在 Dreamweaver CS6 中 ， 可 以 使 用 【检查 表单 】 行 为 来 为 文本 
域 设置 有 效 性 规则 ， 检 查 文本 域 中 的 内 容 是 否 有 效 ， 以 确保 输入 数据 的 正确 性 。 

使 用 【检查 表单 】 行 为 的 具体 步骤 如 下 。 

ET 打开 随 书 光盘 中 的 ch07\ 检 查 表单 行为 htm 文件 ， 如 图 7-51 所 示 。 

EEIDy 按 ShifttF4 组 合 键 ， 打 开 【 行 为 】 面 板 ， 如 图 7-52 所 示 。 
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7-51 打开 素材 文件 7-52 【行为 】 面 板 
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ED) 单 击 【 行 为 】 面 板 上 的 四 按钮 ， 在 弹出 的 菜单 中 选择 【检查 表单 】 命 令 ， 如 
图 7-53 所 示 。 
EC 弹出 【检查 表单 】 对 话 框 ，【 域 】 列 表 框 中 显示 了 文档 中 插入 的 文本 域 ， 如 
图 7-54 所 示 。 


linput “textfield4” 
总 input :textfiel 西 > 


input “textfiel 6” 


© 4H ©O 


图 7-53 选择 【检查 表单 】 命 令 图 7-54 【检查 表单 】 对 话 框 


在 【检查 表单 】 对 话 框 中 主要 参数 选项 的 具体 作用 如 下 。 

e 【 域 】 列 表 框 用 于 选择 要 检查 数据 有 效 性 的 表单 对 象 。 

e 【 值 】 复 选 框 : 用 于 设置 该 文本 域 中 是 否 使 用 必 填 文本 域 。 

e 【可 接受 】 选 项 区 域 : 用 于 设置 文本 域 中 可 填 数据 的 类 型 ， 可 以 选择 4 种 类 型 。 选 
择 【 任 何 东西 】 选 项 表明 文本 域 中 可 以 输入 任意 类 型 的 数据 。 选 择 【 数 字 】 选 项 表 
明文 本 域 中 只 能 输入 数字 数据 。 选 择 【 电 子 邮件 地 址 】 选 项 表明 文本 域 中 只 能 输入 
电子 邮件 地 址 。 选 择 【 数 字 从 】 选 项 可 以 设置 可 输入 数字 值 的 范围 ， 可 在 右边 的 文 
本 框 中 从 左 至 右 分 别 输入 最 小 数值 和 最 大 数值 。 

EGRD 选中 textfield3 文本 域 ， 选 中 【必需 的 】 复 选 框 ， 选 中 【任何 东西 】 单 选 按钮 ， 
设置 该 文本 域 是 必需 填写 项 ， 可 以 输入 任何 文本 内 容 ， 如 图 7-55 所 示 。 
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图 7-55 设置 【检查 表单 】 属 性 


ED 参照 相同 的 方法 ， 设 置 textfield2 和 textfield3 文本 域 为 必需 填写 项 。 其 中 
textfield2 文本 域 的 可 接受 类 型 为 数字 ，textfield3 文本 域 的 可 接受 类 型 为 任何 东西 ， 
如 图 7-56 所 示 。 


nput “textEiel 人 
Mt textfisl 65” 


法 [iextares “textarea” 


全: 加 区 硬汉 


可 接受 全 任何 东西 © ns 
日 昌 子 郎 件 地 直 。 同 数 了 从 


图 7-56 设置 其 他 检查 信息 
EC 单 击 【 确 定 】 按 钮 ， 即 可 添加 【检查 表单 】 行 为 ， 如 图 7-57 所 示 。 
ECERB 保存 文 要 ， 按 F12 键 在 正 浏览 器 中 预览 效果 。 当 在 文档 的 文本 域 中 未 填写 或 填 
写 有 误 时 ， 会 打开 一 个 信息 提示 框 ， 提 示 出 错 信息 ， 如 图 7-58 所 示 。 
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图 7-57 添加 【检查 表单 】 行 为 图 7-58 ”预览 网 页 提示 信息 


7.6.5 “案例 18 一 一 设置 状态 栏 文本 


使 用 【设置 状态 栏 文本 】 动 作 可 在 浏览 器 窗口 底部 左 侧 的 状态 栏 中 显示 消息 。 比 如 ， 可 
以 使 用 此 动作 在 状态 栏 中 显示 链接 的 目标 而 不 是 显示 与 之 关联 的 URL。 

设置 状态 栏 文本 的 操作 步骤 如 下 。 

打开 随 书 光盘 中 的 ch07\ 设 置 状态 栏 index html 文件 ， 如 图 7-59 所 示 。 

EECIDy 按 ShifttF4 组 合 键 ， 打 开 【 行 为 】 面 板 ， 如 图 7-60 所 示 。 

EDS) 单 击 【 行 为 】 面 板 上 的 四 按钮 ， 在 弹出 的 菜单 中 选择 【设置 文本 】-【 设 置 状 
态 栏 文本 】 命 令 ， 如 图 7-61 所 示 。 

EC 弹出 【设置 状态 栏 文本 】 对 话 框 ， 在 【消息 】 文 本 框 中 输入 “欢迎 光临 ! ”， 
也 可 以 输入 相应 的 JaveSeript 代码 ， 如 图 7-62 所 示 。 
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图 7-60 【行为 】 面 板 


消息 : 欢迎 光量 1 
入 本 并 区 所 有 济 光 类 都 支 持 更 牙关 态 们 广东 有 吾 浏 区 
各 会 可 费用 户 首 丢 参 数 未 确 下 是 否 刀 许 此 功 骨 。 


图 7-61 选择 【设置 状态 栏 文本 】 命 令 图 7-62 【设置 状态 栏 文本 】 对 话 框 


区 于 BY 单 击 【 确 定 】 按 钮 ， 添 加 行为 ， 如 图 7-63 所 示 。 
ES 保存 文 要 ， 按 F12 键 在 正 浏览 器 中 预览 效果 ， 如 图 7-64 所 示 。 


图 7-63 添加 行为 图 7-64 ”预览 效果 


7.7 ”实战 演练 一 一 使 用 表单 制作 留言 本 


一 个 好 的 网 站 ， 总 是 在 不 断 地 完善 和 改进 。 在 改进 的 过 程 中 ， 总 是 要 经 常 听取 别人 的 意 
， 为 此 可 以 通过 留言 本 来 获取 浏览 者 浏览 网 站 的 反馈 信息 。 
使 用 表单 制作 留言 本 的 具体 操作 步骤 如 下 。 
打开 随 书 光盘 中 的 ch07\ 制 作 留 言 本 .html 文件 ， 如 图 7-65 所 示 。 
区 TY 将 光标 移 到 下 一 行 ， 单 击 【插入 】 面 板 【 表 单 】 选 项 卡 中 的 【表单 】 按 钮 回 ， 
插入 一 个 表单 ， 如 图 7-66 所 示 。 
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图 7-65 打开 素材 文件 图 7-66 插入 表单 


ERB) 将 光标 放 在 红色 的 虚线 内 ， 选 择 【 插 入 】 一 【表格 】 菜 单 命令 ， 打 开 【 表 格 】 
对 话 框 。 将 【 行 数 】 设 置 为 9，【 列 】 设 置 为 2，【 表 格 宽度 】 设 置 为 470 像素 ， 
【边框 粗细 】 设 置 为 1，【 单 元 格 边 距 】 设 置 为 2，【 单 元 格 间距 】 设 置 为 3， 如 
图 7-67 所 示 。 

EC 单 击 【 确 定 】 按 钮 ， 在 表单 中 插入 表格 ， 并 调整 表格 的 宽度 ， 如 图 7-68 所 示 。 

] 


行 数 : 9 至 2 


| 
过 杠 柜 给 - 1 Ei 
时 元 桥 思 下 2 
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图 7-67 【表格 】 对 话 框 图 7-68 添加 表格 
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莉 于 BY 在 第 1 列 单元 格 中 输入 相应 的 文字 ， 然 后 选 定 文字 ， 在 【属性 】 面 板 中 ， 设 置 
文字 的 【大 小 】 为 12， 将 【水 平 】 设 置 为 【 右 对 齐 】，【 垂 直 】 设 置 为 【居中 】， 
如 图 7-69 所 示 。 

ED 将 光标 放 在 第 1 行 的 第 2 列 单元 格 中 ， 选 择 【插入 】 一 【表单 】 一 【文本 域 】 
菜单 命令 ， 插 入 文本 域 。 在 【属性 】 面 板 中 ， 设 置 文本 域 的 【字符 宽度 】 为 12， 
【最 多 字符 数 】 为 12，【 类 型 】 为 【单行 】， 如 图 7-70 所 示 。 


FR a 
各 字条 扫 1 和 抽检 中 


昌 mol 
EEC 4 x 350v 2 人/ | 各 午休 中 文 Wa2312] he) 


图 7-69 在 表格 中 输入 文字 图 7-70 添加 文本 域 


TY 重复 以 上 步骤 ， 在 第 3 行 、 第 4 行 和 第 5 行 的 第 2 列 单元 格 中 插入 文本 域 ， 并 
设置 相应 的 属性 ， 如 图 7-71 所 示 。 

ED 将 光标 放 在 第 2 行 的 第 2 列 单元 格 中 ， 单 击 【插入 】 面 板 【 表 单 】 选 项 卡 中 的 
【 单 选 按钮 】 按 钮 回 ， 插 入 单 选 按钮 。 在 单 选 按钮 的 右 侧 输入 “ 男 ”， 按 照 同 样 的 
方法 再 插入 一 个 单 选 按钮 ， 输 入 “ 女 ”。 在 【属性 】 面 板 中 ， 将 【初始 状态 】 分 别 
设置 为 【已 勾 选 】 和 【未 选中 】， 如 图 7-72 所 示 。 
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图 7-71 添加 其 他 文本 域 图 7-72 添加 单 选 按钮 


国 于 BY 将 光标 放 在 第 3 行 的 第 2 列 单元 格 中 ， 单 击 【插入 】 面 板 【 表 单 】 选 项 卡 中 的 
【 复 选 框 】 按 钮 回 ， 插 入 复 选 框 。 在 【属性 】 面 板 中 ， 将 【初始 状态 】 设 置 为 【未 
选中 】， 在 其 后 输入 文本 “音乐 ”， 如 图 7-73 所 示 。 
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EC 按照 同样 的 方法 ， 插 入 其 他 复 选 框 ， 设 置 其 属性 并 输入 文字 ， 如 图 7-74 所 示 。 
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图 7-73 添加 复 选 框 图 7-74 添加 其 他 复 选 杠 


本 I 将 光标 置 于 第 8 行 的 第 2 列 单元 格 中 ， 选 择 【 插 入 】 一 【表单 】 一 【文本 区 
域 】 菜 单 命令 ， 插 入 多 行文 本 域 ， 并 将 【属性 】 面 板 中 的 选项 设置 为 默认 值 ， 如 
图 7-75 所 示 。 

本 EY 将 光标 放 在 第 7 行 的 第 2 列 单元 格 中 ， 选 择 【 插 入 】 一 【表单 】 一 【文件 域 】 

菜单 命令 ， 插 入 文件 域 。 在 【属性 】 面 板 中 为 其 设置 相应 的 属性 ， 如 图 7-76 所 示 。 


bl [JE 0 | 同 加 厅 | 0 : 20v 3K71 落 简 示 中 文 G32312) 


(EE - | E23 ee ~ Om E27 ET 加 
[Es] | 大 小 [Ee] [Ss 而 |] 大 小 | 
国生 本 平 中 [ 靶 认 | 办 和 不 坟 行 0 此 和) 三 -| | 本 | 慑 认 。”。] 寓 角 “| 不行 0 背 关 名 06) [| 
一 六 鹤 m 导 -高 0。 是 中 曲 一 六 看 直 m[ 了 |] 高 0 村 是 加) 

7-75 插入 多 行文 本 域 图 7-76 插入 文件 域 


ECDE) 选 定 第 9 行 的 两 个 单元 格 ， 选 择 【修改 】 一 【表格 】 一 【合并 单元 格 】 菜 单 命 
， 合 并 单元 格 。 将 光标 放 在 合并 后 的 单元 格 中 ， 在 【属性 】 面 板 中 ， 将 【水 平 】 
设置 为 【居中 对 齐 】， 如 图 7-77 所 示 。 
EE》 选择 【插入 】 一 【表单 】 一 【按钮 】 菜 单 命令 ， 插 入 [和 区 ] 按 钮 和 [到 要] 按钮 。 在 
【属性 】 面 板 中 ， 分 别 为 其 设置 相应 的 属性 ， 如 图 7-78 所 示 。 
区 BY 保存 文档 ， 按 F12 键 在 正 浏览 器 中 预览 效果 ， 如 图 7-79 所 示 。 
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图 7-77 合并 单 选 格 图 7-78 插入 提交 与 重 置 按钮 


图 7-79 预览 网 页 效果 


7.8 跟 我 练 练 手 


7.8.1 练习 目标 
能 够 熟练 掌握 本 章节 所 讲 内 容 。 
7.8.2 上 机 练习 


练习 1: 在 网 页 中 插入 表单 元 素 。 

练习 2: 在 网 页 中 插入 单 选 按钮 与 复 选 框 。 
练习 3: 制作 网 页 列表 和 菜单 。 

练习 4: 在 网 页 中 插入 按钮 。 

练习 5: 常用 行为 的 应 用 。 


四 
全 i 


7.9 高 手 甜 点 


甜点 1: 如 何 保证 表单 在 IE 浏览 器 中 正常 显示 ? 


在 Dreamweaver 中 插入 表单 并 调整 到 合适 的 大 小 后 ， 在 正 浏览 器 中 预览 时 可 能 会 出 现 表 
单 大 小 失真 的 情况 。 为 了 保证 表单 在 正 浏览 器 中 能 正常 显示 ， 建 议 使 用 CSS 样式 表 调 整 
表单 的 大 小 。 

甜点 2: 如 何 下 载 并 使 用 更 多 的 行为 ? 

Dreamweaver 包含 了 百 余 个 事件 、 行 为 ， 如 果 认 为 这 些 行为 还 不 足以 满足 需求 ， 
Dreamweaver 同时 也 提供 有 扩展 行为 的 功能 ， 可 以 下 载 第 三 方 的 行为 。 下 载 之 后 解压 到 
Dreamweaver 的 安装 目录 Adobe Dreamweaver CS6\configuration\Behaviors\Actions 下 。 重 新 启 


动 Dreamweaver， 在 【行为 】 面 板 中 单 击 四 按钮 ， 在 弹出 的 动作 菜单 中 即 可 看 到 新 添加 的 动 
作 选 项 。 
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8.1 插入 表格 


表格 由 行 、 列 和 单元 格 3 部 分 组 成 。 使 用 表格 可 以 排列 网 页 中 的 文本 、 图 像 等 各 种 网 页 
元 素 ， 可 以 在 表格 中 自由 地 进行 移动 、 复 制 和 粘贴 等 操作 ， 还 可 以 在 表格 中 嵌 套 表格 ， 使 页 
面 的 设计 更 灵活 、 方 便 。 

使 用 【插入 】 面 板 或 【插入 】 菜 单 都 可 以 创建 新 表格 ， 插 入 表格 的 具体 步骤 如 下 。 

ED 新 建 一 个 空白 网 页 文档 ， 将 光标 定位 在 需要 插入 表格 的 位 置 ， 如 图 8-1 所 示 。 
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图 8-1 空白 网 页 文档 


ECEP9 单 击 【 插 入 】 面 板 【 常 用 】 选 项 卡 中 的 【表格 】 按 钮 ， 或 选择 【插入 】 一 【 表 
格 】 菜 单 命令 ， 如 图 8-2 所 示 。 


图 8-2 【常用 】 面 板 与 【表格 】 菜 单 命令 


EEep 打开 【表格 】 对 话 框 ， 在 其 中 可 以 对 表格 的 行 数 、 列 表 ， 表 格 宽度 等 信息 进行 
设置 ， 如 图 8-3 所 示 。 

【表格 】 对 话 框 中 各 个 选项 及 参数 的 含义 如 下 。 

e@ 【 行 数 】: 在 该 文本 框 中 输入 新 建 表格 的 行 数 。 

e@ 【 列 】: 在 该 文本 框 中 输入 新 建 表格 的 列 数 。 

@ 【表格 宽度 】: 该 文本 框 用 于 设置 表格 的 宽度 ， 单 位 可 以 是 像素 或 百分比 。 

@ 【边框 粗细 】: 该 文本 框 用 于 设置 表格 边框 的 宽度 (以 像素 为 单位 )。 若 设置 为 0， 在 
浏览 时 则 不 显示 表格 边框 。 


| 本 
第 
e 【单元 格 边 距 】: 该 文本 框 用 于 设置 单元 格 边框 和 单元 格 内 容 之 间 的 像素 数 。 > 
e 【单元 格 间 距 】: 该 文本 框 用 于 设置 相 邻 单元 格 之 间 的 像素 数 。 
e 【标题 】: 该 选项 组 用 于 设置 表 头 样式 ， 有 4 种 样式 可 供 选择 ， 分 别 如 下 。 下 
【无 】: 不 将 表格 的 首 列 或 首 行 设置 为 标题 。 桥 
【 左 】: 将 表格 的 第 一 列 作为 标题 列 ， 表 格 中 的 每 一 行 可 以 输入 一 个 标题 。 网 
【顶部 】: 将 表格 的 第 一 行 作为 标题 行 ， 表 格 中 的 每 一 列 可 以 输入 一 个 标题 。 布 
【两 者 】: 可 以 在 表格 中 同时 输入 列 标题 和 行 标题 。 1 
。 【标题 】: 在 该 文本 框 中 输入 表格 的 标题 ， 标 题 将 显示 在 表格 的 外 部 。 
。 【摘要 】， 在 这 里 可 笨 入 文字 对 表格 进行 说 明 或 注释 ， 内 容 不 会 在 浏览 器 中 显示 ，。 用 
仅 在 源 代 码 中 显示 ， 可 提高 源 代码 的 可 读 性 。 格 
EGG 单 击 【确定 】 按 钮 ， 即 可 在 文档 中 插入 表格 ， 如 图 8-4 所 示 。 
员 
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图 8-3 【表格 】 对 话 框 图 8-4 在 文档 中 插入 表格 


8.2 选中 表格 
插入 表格 后 ， 可 以 对 表格 进行 选中 操作 。 比 如 选中 整个 表格 或 表格 中 的 行 与 列 、 单 元 格 等 。 


8.2.1 案例 1 一 一 选中 完整 的 表格 


选中 完整 表格 的 方法 主要 有 以 下 4 种 。 

(1) 将 鼠标 指针 移动 到 表格 上 面 ， 当 鼠标 指针 呈 网 格 图 标 轩 时 单 击 鼠标 左 键 ， 如 图 8-5 
所 示 。 
(2) 单 击 表 格 四 周 的 任意 一 条 边框 线 ， 如 图 8-6 所 示 。 

(3) 将 光标 置 于 任意 一 个 单元 格 中 ， 选 择 【 修 改 】 一 【表格 】 一 【选择 表格 】 菜 单 命 
令 ， 如 图 8-7 所 示 。 

(4) 将 光标 置 于 任意 一 个 单元 格 中 ， 在 文档 窗口 状态 栏 的 标签 选择 器 中 单 击 <table> 标 

签 ， 如 图 8-8 所 示 。 
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图 8-7 选中 表格 的 方法 图 8-8 选中 表格 的 方法 


8.2.2 ”案例 2 一 一 选中 行 和 列 


选中 表格 中 的 行 和 列 的 方法 主要 有 以 下 两 种 。 

(1) 将 光标 定位 于 行 首 或 列 首 ， 鼠 标 指针 变 成 省 或 了 的 箭头 形状 时 单 击 鼠 标 左 键 ， 即 可 选 
中 表格 的 行 或 列 ， 如 图 8-9 所 示 。 

(2) 按 住 鼠标 左 键 不 放 从 左 至 右 或 从 上 至 下 拖 动 ， 即 可 选中 表格 的 行 或 列 ， 如 图 8-10 所 示 。 


画 unuted- = 


eis rns 国 国 二 < 


图 8-9 选中 表格 中 的 行 图 8-10 选中 表格 中 的 列 
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8.2.3 ”案例 3 一 一 选中 单元 格 


要 想 选 中 表格 中 的 单个 单元 格 ， 可 以 进行 以 下 几 种 操作 。 

(1) 按 住 Ctrl 键 不 放 单 击 单元 格 ， 可 以 选中 一 个 单元 格 。 

(2) 按 住 鼠标 左 键 不 放 并 拖 动 ， 可 以 选中 单个 单元 格 。 

(3) 将 光标 放置 在 要 选中 的 单元 格 中 ， 单 击 文档 窗口 状态 栏 上 的 <td> 标 签 ， 即 可 选中 该 
单元 格 ， 如 图 8-11 所 示 。 


着 缀 名 许 莹 洒 沽 集 一 一 加 州 河 习 


图 8-11 选中 单元 格 


想 要 选中 表格 中 的 多 个 单元 格 ， 可 以 进行 下 列 操作 。 

(1) 选中 相 邻 的 单元 格 、 行 或 列 : 先 选中 一 个 单元 格 、 行 或 列 ， 按 住 Shift 键 的 同时 单 击 
另 一 个 单元 格 、 行 或 列 ， 和 矩形 区 域内 的 所 有 单元 格 、 行 或 列 就 都 会 被 选中 ， 如 图 8-12 所 示 。 

(2) 选中 不 相 邻 的 单元 格 、 行 或 列 : 按 住 Ctrl 键 的 同时 单 击 需要 选中 的 单元 格 、 行 或 列 
即 可 ， 如 图 8-13 所 示 。 
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图 8-12 ”选中 相 邻 的 单元 格 图 8-13 ”选中 不 相 邻 的 单元 格 


RE 在 选中 单元 格 、 行 或 列 时 ， 两 次 单 击 会 取消 已 选中 的 对 象 的 选中 状态 。 


17@ 


Dreamweaver 动态 网 站 开发 
案例 课堂 ~… 


8.3 表格 属性 


为 了 使 创建 的 表格 更 加 美观 ， 需 要 对 表格 的 属性 进行 设置 。 表 格 属性 主要 包括 完整 表格 
的 属性 和 表格 中 单元 格 的 属性 两 种 。 


8.3.1 案例 4 一 一 设置 单元 格 属性 


在 Dreamweaver CS6 中 ， 可 以 单独 设置 单元 格 的 属性 。 设 置 单 元 格 属性 的 具体 步骤 如 下 。 

EC 按 住 Ctrl 键 的 同时 单 击 单元 格 的 边框 ， 选 中 单元 格 ， 如 图 8-14 所 示 。 

EEJPp 选择 【窗口 】 一 【属性 】 菜 单 命令 ， 打 开 显 示 单 元 格 属性 的 面板 ， 从 中 对 单元 
格 、 行 和 列 等 的 属性 进行 设置 ， 比 如 将 选中 的 单元 格 的 背景 颜色 设置 为 蓝 色 
(#0000FF)， 如 图 8-15 所 示 。 


CC Ess 
i Le CoD CE EIS et Ga cD ELEEY 
图 8-14 选中 单元 格 图 8-15 “为 单元 格 添加 背景 颜色 
在 选中 单元 格 后 也 可 以 按 Ctrl+F3 键 ， 打 开 【 属 性 】 面 板 ， 如 图 8-16 所 示 。 
i 柯 式 加 [无 了 =] 大 无 -BI 竺 汪 引 组 全 是 DLL ] 
bs 瑟 无 ~ 黄 接 中 -0D F 加 -| 


臣 单元 格 。 水 平 多 )[ 财 座 | 不 执行 0) 门 BW 6) 用 50000F7 Ca 
应 站。 "| 高 人 J 村 类 @) 门 


图 8-16 【属性 】 面板 
在 单元 格 的 【属性 】 面板 中 ， 可 以 设置 以 下 选项 或 参数 。 
(1) 【合并 单元 格 】 按 钮 回 : 用 于 把 所 选 的 多 个 单元 格 合并 为 一 个 单元 格 。 
(2) 【 拆 分 单元 格 为 行 或 列 】 按 钮 鹏 : 用 于 将 一 个 单元 格 分 成 两 个 或 更 多 个 单元 格 。 


Sm 一 次 只 能 对 一 个 单元 格 进行 拆 分 ， 如 果 选 择 的 单元 格 多 于 一 个 ， 此 按钮 将 禁 


(3) 【水 平 】: 该 下 拉 列 表 框 用 于 设置 单元 格 中 对 象 的 水 平 对 齐 方式 。【 水 平 】 下 拉 列 
表 中 包括 默认 、 左 对 齐 、 居 中 对 齐 和 右 对 齐 等 4 个 选项 。 

(4) 【垂直 】: 该 下 拉 列 表 框 用 于 设置 单元 格 中 对 象 的 垂直 对 齐 方式 ，【 垂 直 】 下 拉 列 
表 中 包括 默认 、 项 端 、 居 中 、 底 部 和 基线 等 5 个 选项 。 
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(5) 【 宽 】 和 【高 】: 这 两 个 文本 框 用 于 设置 单元 格 的 宽度 和 高 度 ， 单 位 是 像素 或 百 
分 比 。 


pn 采用 像素 为 单位 的 值 是 表格 、 行 或 列 当 前 的 宽度 或 高 度 的 值 ; 以 百分比 为 单 
”位 的 值 是 表格 、 行 或 列 占 当 前 文档 窗口 宽度 或 高 度 的 百分比 。 


(6) 【不 换行 】: 该 复 选 框 用 于 设置 单元 格 文本 是 否 换行 。 如 果 选 中 了 【不 换行 】 复 选 
框 ， 表 示 单 元 格 的 宽度 随 文字 长 度 的 增加 而 变 宽 。 当 输入 的 表格 数据 超出 单元 格 宽度 时 ， 单 元 
格 会 调整 宽度 来 容纳 数据 。 

(7) 【标题 】: 该 复 选 框 用 于 将 当前 单元 格 设置 为 标题 行 。 

(8) 【背景 颜色 】: 选项 用 于 设置 单元 格 的 背景 颜色 。 使 用 颜色 选择 器 用 可 选择 要 设置 
的 单元 格 的 背景 颜色 。 


8.3.2 ”案例 5 一 一 设置 整个 表格 属性 


选中 整个 表格 后 ， 选 择 【 窗 口 】 一 【属性 】 菜 单 命令 或 按 Ctrl+F3 键 ， 即 可 打开 表格 的 
【 属性】 面板 ， 如 图 8-17 所 示 。 
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图 8-17 表格 的 【属性 】 面 板 


在 表格 的 【属性 】 面 板 中 ， 可 以 对 表格 的 行 、 宽 、 对 齐 方 式 等 参数 进行 设置 。 不 过 ， 对 
表格 的 高 度 一 般 不 需要 进行 设置 ， 因 为 表格 会 根据 单元 格 中 所 输入 的 内 容 自 动 调整 。 


8.4 操作 表格 


表格 创建 完成 后 ， 还 可 以 对 表格 进行 操作 ， 比 如 调整 表格 的 大 小 、 增 加 或 删除 表格 中 的 
行 与 列 、 合 并 与 拆 分 单元 格 等 。 


8.4.1 案例 6 一 一 调整 表格 的 大 小 


创建 表格 后 ， 可 以 根据 需要 调整 表格 或 表格 的 行 、 列 的 宽度 或 高 度 。 整 个 表格 的 大 小 被 
调整 时 ， 表 格 中 所 有 的 单元 格 将 成 比例 地 改变 大 小 。 

调整 行 和 列 大 小 的 方法 如 下 。 

要 改变 行 的 高 度 ， 将 鼠标 指针 置 于 表格 两 行 之 间 的 界线 上 ， 当 鼠标 指针 变 成 地 形状 时 上 
下 拖 动 鼠标 即 可 ， 如 图 8-18 所 示 。 

要 改变 列 的 宽度 ， 将 鼠标 指针 置 于 表格 两 列 之 间 的 界线 上 ， 当 鼠标 指针 变 成 中 形状 时 左 
右 拖 动 即 可 ， 如 图 8-19 所 示 。 


着 到 加 州 诬 洒 河谷 一 一 耶 说 河 到 亩 浪 秆 车 


19@ 


Dreamweaver 动态 网 站 开发 


案例 课堂 p> 
动 uneiwiec-; 本 二 vrttsd 
| | J 
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soav> Ea CI EE eer une 日 司 村 45731v 
~、N 8-18 ”改变 行 的 高 度 8-19 改变 列 的 宽度 
调整 表格 大 小 的 方法 如 下 。 


选中 表格 后 拖 动 选择 手柄 ， 沿 相应 的 方向 调整 大 小 。 拖 动 右 下 角 的 手柄 ， 可 在 两 个 方向 
上 调整 表格 的 大 小 (宽度 和 高 度 )， 如 图 8-20 所 示 。 


4 


图 8-20 调整 表格 的 大 小 
8.4.2 ”案例 7 一 一 增加 行 和 列 


要 在 当前 表格 中 增加 行 和 列 ， 可 以 进行 以 下 几 种 操作 。 
(1) 将 光标 移动 到 要 插入 行 的 下 一 行 并 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【表格 】 一 【 插 
入 行 】 命 令 ， 如 图 8-21 所 示 。 


(2) 将 光标 移动 到 要 插入 行 的 下 一 行 ， 选 择 【 修改】 一 【表格 】 一 【插入 行 】 菜 单 命 
令 ， 如 图 8-22 所 示 。 


ColtAtM 
Ch+Alt+S 


Cl:M 
Cal+shiftrA 


图 8-21 选择 【插入 行 】 菜 单 命令 8-22 ”选择 【插入 行 】 菜 单 命令 
(3) 将 光标 移动 到 要 插入 行 的 单元 格 ， 按 Ctl+M 组 合 键 即 可 插入 行 ， 如 图 8-23 所 示 。 


四 
全 200 


er 
Es | 
EE 


J tml a ELE EY 


8-23 插入 行 


Se 使 用 键盘 也 可 以 在 单元 格 中 移动 光标 ， 按 Tab 键 可 将 光标 移动 到 下 一 个 单元 
并 格 ， 按 Shift + Tab 组 合 键 可 将 光标 移动 到 上 一 个 单元 格 。 在 表格 最 后 一 个 单元 格 
中 按 Tab 键 ， 将 自动 添加 一 行 单元 格 。 


要 在 当前 表格 中 插入 列 ， 可 以 进行 以 下 几 种 操作 。 

(1) 将 光标 移动 到 要 插入 列 的 右边 一 列 并 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【表格 】 一 
【插入 列 】 命 令 ， 如 图 8-24 所 示 。 
(2) 将 光标 移动 到 要 插入 列 的 右边 一 列 ， 选 择 【 修 改 】 一 【表格 】 一 【插入 列 】 菜 单 命 
如 图 8-25 所 示 。 


着 避 辑 放 黄 淋 沽 集 一 一 加 州 河 习 


仿 


号 


要 和 


Cs 


Ni 


图 8-24 选择 【插入 列 】 菜 单 命令 图 8-25 选择 【插入 列 】 菜 单 命令 


(3) 将 光标 移动 到 要 插入 列 的 右边 一 列 ， 按 CtrltShifttA 组 合 键 ， 即 可 插入 列 ， 如 图 8-26 
所 示 。 


8-26 插入 列 
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mm 
长 在 插入 列 时 ， 表 格 的 宽度 不 会 改变 ， 随 着 列 数 的 增加 ， 列 的 宽度 则 会 相应 地 
”成 小 


8.4.3 案例 8 一 一 删除 行 、 列 、 单 元 格 


要 删除 行 或 列 ， 可 以 进行 以 下 几 种 操作 。 
(1) 选 定 要 删除 的 行 或 列 ， 按 Delete 键 即 可 删除 。 


5 使 用 Delete 键 可 以 删除 多 行 或 多 列 ， 但 不 能 删除 所 有 的 行 或 列 。 如 果 要 删除 
慌 整个 表格 ， 则 需要 先 选中 整个 表格 ， 然 后 按 Delete 键 即 可 删除 。 


(2) 将 光标 放置 在 要 删除 的 行 或 列 中 ， 选 择 【 修 改 】 一 【表格 】 一 【删除 行 】 或 【删除 


列 】 命 令 ， 即 可 删除 行 或 列 ， 如 图 8-27 所 示 。 


图 8-27 选择 【删除 列 】 菜 单 命令 


A 可 以 删除 所 有 的 行 或 列 ， 但 不 能 同时 删除 多 行 或 多 列 。 


8.4.4 案例 9 一 一 剪 切 、 复 制 和 粘贴 单元 格 


1. 剪 切 单元 格 


移动 单元 格 可 使 用 【 剪 切 】 和 【粘贴 】 命 令 来 完成 。 移 动 单元 格 的 具体 步骤 如 下 。 

EC 选中 要 移动 的 一 个 或 多 个 单元 格 ， 如 图 8-28 所 示 。 

EEC 选择 【编辑 】 一 【 剪 切 】 菜 单 命令 ， 可 将 选中 的 一 个 或 多 个 单元 格 从 表格 中 前 
切 出 来 ， 如 图 8-29 所 示 。 

ES 将 光标 置 于 需要 粘贴 单元 格 的 位 置 ， 选 择 【 编 辑 】 一 【粘贴 】 菜 单 命 令 即 可 ， 
如 图 8-30 所 示 。 


画 united-: orrvu* 


千 括 和 四“ 个 故 [M) 窜 RL 画 unauediormvb- 
巩 湛 (U) 插入 表格 列 Ce+Z 
| 醒 侯 (R) 翘 除 Ctrl+Y 
| Ely) CtrltX [= 
] 拷贝 (O RB Ct+C 
| FS | 烙 贴 (P) Cultv a 
8-28 ”选中 单元 格 8-29 ”选择 【 剪 切 】 菜 单 命令 8-30 ”粘贴 单元 格 


Se 所 有 被 选中 的 单元 格 必须 是 连续 的 且 形 成 的 区 域 呈 矩 形 才能 被 剪 切 或 复制 。 
对 于 表格 中 的 某 些 行 或 列 ， 使 用 【 藤 切 】 命 令 可 将 所 选中 的 行 或 列 删 除 ， 否 则 仅 
删除 单元 格 中 的 内 容 和 格式 。 


2. 复制 和 粘贴 单元 格 


要 粘贴 多 个 单元 格 ， 剪 贴 板 的 内 容 必 须 和 表格 的 格式 保持 一 致 。 复 制 、 粘 贴 单 元 格 的 具 
体 步 又 如 下 。 

ECG 选中 要 复制 的 单元 格 ， 选 择 【 编 辑 】 一 【拷贝 】 菜 单 命令 ， 如 图 8-31 所 示 。 

ED 将 光标 置 于 需要 粘贴 单元 格 的 位 置 ， 选 择 【 编 辑 】 一 【粘贴 】 菜 单 命令 即 可 ， 


如 图 8-32 所 示 。 
撤消 (U) 插入 表格 列 Ctrl+Z 
重 做 (R) 删除 Ctrl+Y 
蔓 切 人 ) Cerl+X 
拷贝 (CO) N Ctrl+C 
车 贴 (P) Cer+V : 
图 8-31 选择 【拷贝 】 菜 单 命令 图 8-32 ”粘贴 单元 格 
8.4.5 ”案例 10 一 一 合并 和 拆 分 单元 格 
1. 合并 单元 格 


只 要 选择 的 单元 格 区 域 是 连续 的 矩形 ， 就 可 以 对 单元 格 进行 合并 操作 ， 生 成 一 个 跨 多 行 
或 多 列 的 单元 格 ， 否 则 将 无 法 合并 。 

合并 单元 格 的 具体 步骤 如 下 。 

EEIDe 在 文档 窗口 中 选中 要 合并 的 单元 格 ， 如 图 8-33 所 示 。 


党 新 闻 资 讯 


攻 二 ] 
学 物 

语 学 

-= 汤 史 光 


8-33 ”选中 要 合并 的 单元 格 


加 国 


着 玛 加州 诬 洒 酒 集 一 一 耶 训 河 习 加 浪 秆 车 


203@ 


Dreamweaver 动态 网 站 开发 
: 案例 课堂 ~ 


EDU 执行 下 列 任意 一 种 操作 即 可 合并 单元 格 。 

(D 选择 【修改 】--【 表 格 】--【 合 并 单元 格 】 菜 单 命令 。 

(2) 单 击 【 属 性 】 面 板 中 的 【合并 单元 格 】 按 钮 加 |。 

G) 右 击 ， 弹 出 快捷 菜单 ， 选 择 【表格 】 一 【合并 单元 格 】 命 令 ， 如 图 8-34 所 示 。 
合并 完成 后 ， 合 并 前 各 单元 格 中 的 内 容 将 放 在 合并 后 的 单元 格 里 面 ， 如 图 8-35 所 示 。 


图 8-34 选择 【合并 单元 格 】 菜 单 命令 图 8-35 合并 之 后 的 单元 格 


2. 拆 分 单元 格 


拆 分 单元 格 是 将 选中 的 单元 格 拆 分 成 行 或 列 。 拆 分 单元 格 的 具体 步骤 如 下 。 
ET 将 光标 放置 在 要 拆 分 的 单元 格 中 或 选中 一 个 单元 格 ， 如 图 8-36 所 示 。 


学 物 
语 学 
三 


图 8-36 ”选中 要 拆 分 的 单元 格 


ETE> 执行 下 列 任意 一 种 操作 即 可 实现 拆 分 单元 格 。 

(D 选择 【修改 】 一 【表格 】 一 【 拆 分 单元 格 】 菜 单 命令 。 

C@) 单 击 【属性 】 面 板 中 的 【 拆 分 单元 格 】 按 钮 耳 

G) 鼠标 右 击 并 在 弹出 的 快捷 菜单 中 选择 【表格 】 一 【 拆 分 单元 格 】 命 令 。 

TE> 弹出 【 拆 分 单元 格 】 对 话 框 ， 在 【把 单元 格 拆 分 】 栏 中 可 选择 【 行 】 或 【 列 】 
单 选 按钮 ， 在 【 列 数 】 或 【 行 数 】 微 调 框 中 可 输入 要 拆 分 成 的 列 数 或 行 数 ， 如 图 8-37 
所 示 。 

EY 单 击 【确定 】 按 钮 ， 即 可 拆 分 单元 格 ， 如 图 8-38 所 示 。 


招 单元 格 折 分 可行) | 寺 
© - 
商 语 化 学 


区 野 


8-37 【 拆 分 单元 格 】 对 话 框 8-38” 拆 分 后 的 单元 格 
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8.5 ”操作 表格 数据 


在 制作 网 页 时 ， 可 以 使 用 表格 来 布局 页 面 。 使 用 表格 时 ， 在 表格 中 既 可 以 输入 文字 ， 也 
可 以 插入 图 像 ， 还 可 以 插入 其 他 的 网 页 元 素 。 在 网 页 的 单元 格 中 还 可 以 嵌 套 一 个 表格 ， 这 样 
就 可 以 使 用 多 个 表格 来 布局 页 面 。 


8.5.1 案例 11 一 一 在 表格 中 输入 文本 


在 需要 输入 文本 的 单元 格 中 单 击 ， 即 可 在 表格 中 输入 文本 。 单 元 格 在 输入 文本 时 可 以 自 
动 扩展 ， 如 图 8-39 所 示 。 


着 到 加 州 诬 洒 酒 集 一 一 名 讨 沿 到 加 注 本 车 山 8 洲 鲁 


多 GG 


古本 


+a 你 要 买 你 要 卖 ? 可 


图 8-39 在 单元 格 中 输入 文本 


8.5.2 ”案例 12 一 一 在 表格 中 插入 图 像 


在 表格 中 插入 图 像 是 制作 网 页 过 程 中 常见 的 操作 之 一 ， 其 具体 的 操作 步骤 如 下 。 

ED 将 光标 放置 在 需要 插入 图 像 的 单元 格 中 ， 如 图 8-40 所 示 。 

EEJ2p 单 击 【 插 入 】 面 板 【 常 用 】 选 项 卡 中 的 【图 像 】 按 钮 ， 或 选择 【插入 】 一 【图 
像 】 菜 单 命令 ; 或 从 【插入 】 面 板 中 拖 动 【图像 】 按 钮 到 单元 格 中 ， 如 图 8-41 所 示 。 


[ET -Ox 


[op cm epee EI TE 


图 8-40 ”选中 要 插入 图 像 的 单元 格 图 8-41 【常用 】 选 项 卡 
EEJes 打开 【选择 图 像 源 文件 】 对 话 框 ， 在 其 中 选择 需要 插入 表格 之 中 的 图 片 ， 如 
图 8-42 所 示 。 


EC 单 击 【确定 】 按 钮 ， 即 可 将 选中 的 图 片 添加 到 表格 之 中 ， 如 图 8-43 所 示 。 
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md -Cx 


[ 
Ls s 国 加 FTE 
图 8-42 【选择 图 像 源 文件 】 对 话 杠 图 8-43 在 表格 中 插入 图 片 


8.5.3 ”案例 13 一 一 表格 中 的 数据 排序 


表格 中 的 排序 功能 主要 是 针对 具有 格式 的 数据 表格 ， 是 根据 表格 列表 中 的 数据 来 排序 
的 。 具 体操 作 步 又 如 下 。 


EEC 选中 要 排序 的 表格 ， 如 图 8-44 所 示 。 
ECEDUPD 选择 【命令 】 一 【排序 表格 】 菜 单 命 令 ， 打 开 【 排 序 表 格 】 对 话 框 ， 如 图 8-45 
所 示 。 


选项 门 排序 包含 第 一 行 
由 排序 标题 行 
加 拓 序 电 生 行 
日 完成 激 序 后 所 有 行 辣 色 保持 不 变 


图 8-44 ”选中 要 排序 的 表格 图 8-45 【排序 表格 】 对 话 杠 

在 【排序 表格 】 对 话 框 中 ， 可 以 进行 以 下 设置 。 

(1) 【排序 按 】: 用 于 设置 表格 按 哪 一 列 的 值 对 表格 的 行进 行 排序 。 

(2) 【顺序 】: 用 于 设置 表格 列 排序 是 【 按 字 母 顺序 】 还 是 【 按 数字 顺序 】， 以 及 是 以 
【升序 】(A 到 Z， 小 数字 到 大 数字 ) 还 是 【降序 】 对 列 进行 排序 。 

(3) 【再 按 】 和 【顺序 】: 用 于 确定 在 不 同 列 上 第 二 种 排序 方法 的 排序 顺序 。 

(4) 【排序 包含 第 一 行 】: 用 于 指定 表格 的 第 一 行 也 包括 在 排序 中 。 如 果 第 一 行 是 不 应 
移动 的 标题 ， 则 不 应 选择 此 选项 。 

(5) 【排序 标题 行 】: 用 于 设置 使 用 与 body 行 相同 的 条 件 对 表格 thead 部 分 中 的 所 有 
行进 行 排序 。 

(6) 【排序 脚注 行 】: 用 于 设置 使 用 与 body 行 相同 的 条 件 对 表格 tfoot 部 分 中 的 所 有 
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行进 行 排序 。 

(7) 【完成 排序 后 所 有 行 颜色 保持 不 变 】: 用 于 设置 排序 后 表格 行 的 属性 (例如 颜色 ) 应 该 
保持 与 相同 内 容 的 关联 。 如 果 表 格 行使 用 两 种 交替 的 颜色 ， 则 不 要 选择 此 选项 ， 以 确保 排序 
后 的 表格 仍 具 有 颜色 交替 的 行 。 如 果 行 属性 特定 于 每 行 的 内 容 ， 则 应 选择 此 选项 ， 以 确保 这 
些 属性 与 排序 后 表格 中 正确 的 行 保持 关联 。 

四 于 BY 单 击 【 确 定 】 按 钮 ， 即 可 完成 对 表格 的 排序 。 本 例 是 按照 表格 的 第 4 列 数字 的 

降序 进行 排列 的 ， 如 图 8-46 所 示 。 


潭 避 名 语 偶 订 沽 党 一 一 名 井 河 习 亩 浪 相 车 需 8 小 


图 8-46 排序 完成 后 的 表格 
8.6 ”实战 演练 一 一 使 用 表格 布局 网 页 


使 用 表格 可 以 将 网 页 设计 得 更 加 合理 ， 可 以 将 网 页 元 素 非常 轻松 地 放置 在 网 页 中 的 任何 
一 个 位 置 。 具 体操 作 步 骤 如 下 。 
EDp 打开 随 书 光盘 中 的 ch08\index.htm 文件 ， 将 光标 放置 在 要 插入 表格 的 位 置 。 如 
图 8-47 所 示 。 
EEIDy 单 击 【 插 入 】 面 板 【 常 用 】 选 项 卡 中 的 【表格 】 按 钮 。 弹 出 【表格 】 对 话 杠 ， 
将 【 行 数 】 和 【 列 数 】 均 设置 为 2，【 表 格 宽度 】 设 置 为 100%，【 边 框 粗细 】 设 置 
为 0，【 单 元 格 边 距 】 设 置 为 0，【 单 元 格 间距 】 设 置 为 0， 如 图 8-48 所 示 。 
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8-47 ”打开 素材 文件 图 8-48 【表格 】 对 话 框 


EEJe) 单 击 【 确 定 】 按 钮 ， 一 个 2 行 2 列 的 表格 就 插入 到 了 页 面 中 ， 如 图 8-49 所 示 。 

ECG 将 光标 放置 在 第 一 行 的 第 一 列 单元 格 中 ， 单 击 【插入 】 面 板 【 常 用 】 选 项 卡 中 
的 【图 像 】 按 钮 。 弹 出 【选择 图 像 源 文件 】 对 话 框 ， 从 中 选择 图 像 文件 ， 如 图 8-50 
所 示 。 
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图 8-49 插入 表格 图 8-50 选择 要 插入 的 图 片 


EEIRD) 单 击 【确定 】 按 钮 插入 图 像 ， 如 图 8-51 所 示 。 
本 了 TB 将 光标 放置 在 第 二 行 的 第 一 列 单元 格 中 ， 在 【属性 】 面 板 中 将 【背景 颜色 】 设 
置 为 械 3E3E3， 如 图 8-52 所 示 。 
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图 8-51 插入 图 片 图 8-52 设置 单元 格 的 背景 色 
EEC 在 单元 格 中 输入 文本 ， 在 【属性 】 面 板 中 设置 文本 的 【大 小 】 为 12 像素 ， 如 
图 8-53 所 示 。 


EC 选择 第 二 列 的 两 个 单元 格 ， 在 单元 格 的 【属性 】 面 板 中 单 击 回 按钮 ， 将 单元 格 
合并 ， 如 图 8-54 所 示 。 

ESNDD 选 定 合并 后 的 单元 格 ， 选 择 【 插 入 】-> 【表格 】 菜 单 命令 。 弹 出 【表格 】 对 话 
框 ， 将 【 行 数 】 设 置 为 2，【 列 】 设 置 为 1， 【表格 宽度 】 设 置 为 100%，【 边 框 粗 
细 】 设 置 为 0，【 单 元 格 边 距 】 设 置 为 0，【 单 元 格 间距 】 设 置 为 0， 如 图 8-55 
所 示 。 

EC 单 击 【 确 定 】 按 钮 ， 一 个 两 行 一 列 的 表格 就 插入 到 了 页 面 中 ， 如 图 8-56 所 示 。 
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图 8-53 设置 文本 大 小 


表格 大 小 


图 8-55 【表格 】 对 话 框 


EC 将 光标 放置 到 第 一 行 的 单元 格 中 ， 单 击 【插入 】 面 板 【 常 用 】 选 项 卡 中 的 【图 
像 】 按 钮 。 弹 出 【选择 图 像 源 文件 】 对 话 框 ， 从 中 选择 图 像 文件 ， 如 图 8-57 所 示 。 
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图 8-56 插入 表格 


EE 了 29 单 击 【确定 】 按 钮 插入 图 像 ， 如 图 8-58 所 示 。 


8-57 ”选择 图 片 


关于 我 们 
1 


二 六 志 直人 考 竹 委 天 下 01- 了 -二 


rap amodyavpRiy NO A cm -而 


de 


图 8-58 插入 图 片 


EC 重复 上 述 步 又， 在 第 二 行 的 单元 格 中 插入 图 像 ， 如 图 8-59 所 示 。 
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EPZ) 保存 文档 ， 按 F12 键 在 正 浏览 器 中 预览 效果 ， 如 图 8-60 所 示 。 
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8.7” 跟 我 练 练 手 


8.7.1 练习 目标 
能 够 熟练 掌握 本 章节 所 讲 内 容 。 


8.7.2 上 机 练习 


练习 1: 在 网 页 中 插入 表格 。 
练习 2: 选择 网 页 中 的 表格 。 
练习 3: 设置 表格 的 属性 。 
练习 4: 操作 表格 行 与 列 。 
练习 5: 操作 表格 中 的 数据 。 
练习 6: 使 用 表格 布局 网 页 


甜点 1: 使 用 表格 拼接 图 片 。 


对 于 一 些 较 大 的 图 像 ， 读 者 可 将 其 切 分 成 几 个 部 分 ， 然 后 再 利用 表格 把 它们 拼接 到 一 
这 样 就 可 以 加 快 图 像 的 下 载 速度 。 

具体 的 操作 方法 是 : 先 用 图 像 处 理工 具 (比如 Photoshop) 把 图 像 切 分 成 几 个 部 分 (具体 切 图 
方法 读者 可 以 参照 本 书 中 的 相关 章节 )， 然 后 在 网 页 中 插入 一 个 表格 (其 行列 数 与 切 分 的 图 像 相 
同 )， 在 表格 属性 中 将 边框 粗细 、 单 元 格 边 距 和 单元 格 间距 均 设 为 “0”， 再 把 切 分 后 的 图 像 
按照 原来 的 位 置 关系 插 进 相应 的 单元 格 中 即 可 。 


起 


四 
售 20 


甜点 2: 去 除 表格 的 边框 线 。 


去 除 表格 的 边框 线 有 以 下 两 种 方法 ， 分 别 如 下 。 

(D 在 【表格 】 对 话 框 中 操作 。 

在 创建 表格 时 ， 选 择 【 插 入 】 一 【表格 】 菜 单 命令 ,打开 【 表 格 】 对 话 框 ， 在 其 中 将 
【边框 粗细 】 设 为 0 像素 (这 样 可 使 表格 在 网 页 预览 中 处 于 不 可 见 状态 )， 如 图 8-61 所 示 。 
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图 8-61 设置 表格 边框 粗细 
(2) 在 表格 的 【属性 】 面 板 中 操作 。 
如 图 8-62 


插入 表格 后 ， 选 中 该 表格 ， 然 后 在 表格 【属性 】 面 板 中 设置 【边框 】 为 0， 
所 示 。 
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图 8-62 设置 边框 
当 设置 边框 为 0 之后， 表格 在 设计 区 域 中 显示 的 效果 如 


8-63 所 示 。 


图 8-63 去除 边 框 线 的 表格 
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包含 导航 栏 的 文档 ， 而 另 一 个 框架 则 显示 的 是 


框架 的 作用 就 是 把 浏览 器 
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的 网 页 。 通 常 框架 被 用 来 定义 页 面 的 导航 区 域 和 内 容 区 域 。 使 用 框架 最 常见 的 情况 


就 是 一 个 框架 显示 的 是 
档 。 本 章 就 来 介绍 一 下 如 何 使 用 框架 布局 网 页 。 
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9.1 认识 框架 


框架 主要 用 于 在 一 个 浏览 器 窗口 中 显示 多 个 HTML 文档 的 内 容 ， 通 过 构建 这 些 文档 之 间 
的 相互 关系 ， 实 现 文档 导航 、 浏 览 以 及 操作 等 目的 。 框 架 技术 主要 通过 两 种 元 素来 实现 : 框 
架 集 (Frameset) 和 单个 框架 (Frames)。 

所 谓 框架 集 ， 实 际 上 是 一 个 页 面 ， 即 用 于 定义 在 一 个 文档 窗口 中 显示 多 个 文档 框架 结构 
的 HTML 网 页 。 

框架 集 定义 了 一 个 文档 窗口 中 显示 网 页 的 框架 数 、 框 架 的 大 小 、 载 入 框架 的 网 页 源 和 其 
他 可 定义 的 属性 等 。 一 般 来 说 ， 框 架 集 文档 中 的 内 容 不 会 显示 在 浏览 器 中 。 可 以 将 框架 集 看 
成 是 一 个 容纳 和 组 织 多 个 文档 的 容器 。 

单个 框架 是 指 在 框架 集中 被 组 织 和 显示 的 每 一 个 文档 。 框 架 是 浏览 器 窗口 中 的 一 个 区 
域 ， 它 可 以 显示 与 浏览 器 窗口 其 余部 分 显示 内 容 无 关 的 HTML 文档 。 

框架 网 页 有 以 下 几 个 优点 。 

(1) 很 好 地 保持 网 站 风格 的 统一 。 由 于 框架 页 面 中 导航 的 部 分 是 同一 个 网 页 ， 因 此 整体 
风格 统一 。 

(2) 便于 浏览 者 访问 。 框 架 网 页 中 的 导航 部 分 是 固定 的 ， 不 需要 滚动 条 ， 便 于 浏览 者 访 
问 阅读 。 

(3) 提高 网 页 的 制作 效率 。 可 以 把 每 个 网 页 都 用 到 的 公共 内 容 制作 成 单独 的 网 页 ， 作 为 
框架 网 页 的 一 个 框架 页 面 ， 这 样 ， 就 不 需要 在 每 个 页 面 中 再 次 输入 该 公共 部 分 的 内 容 ， 即 节 
省 时 间 ， 又 能 提高 效率 。 

(4) 方便 更 新 、 维 护 网 站 。 在 更 新 网 站 时 ， 只 需 修 改 公共 部 分 的 框架 内 容 ， 使 用 该 框架 
内 容 的 文档 就 会 自动 更 新 ， 从 而 完成 整个 网 站 的 更 新 修改 。 

框架 在 网 站 的 首页 面 中 比较 常见 。 在 一 个 页 面 中 ， 可 以 使 用 嵌 套 的 框架 来 实现 网 页 设计 
中 的 多 种 需求 。 对 框架 还 可 以 随意 地 设置 边框 的 颜色 、 链 接 和 跳 转 功能 、 框 架 的 行为 等 ， 从 
而 制作 出 更 复杂 的 页 面 。 


9.2 创建 框架 


Dreamweaver CS6 在 【插入 】 面 板 中 提供 了 13 种 框架 集 ， 只 需 单 击 ， 就 可 以 创建 出 框架 
和 框架 集 。 


9.2.1 案例 1 一 一 创建 预定 义 的 框架 集 


使 用 预定 义 的 框架 集 可 以 轻松 地 选择 想 要 创建 的 框架 集 。 创 建 预定 义 框架 集 的 操作 步 又 
如 下 。 
EC 在 Dreamweaver CS6 的 操作 界面 中 选择 【插入 】 一 HIML 一 【框架 】 子 菜单 中 
预定 义 的 框架 集 ， 如 图 9-1 所 示 。 


四 
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EC 在 弹出 的 【框架 标签 辅助 功能 属性 】 对 话 框 中 ， 进 行 相关 参数 的 设置 ， 如 图 9-2 
所 示 。 
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图 9-1 【框架 】 子 菜单 图 9-2 【框架 标签 辅助 功能 属性 】 对 话 框 
EEIRBp 单 击 【确定 】 按 钮 ， 即 可 创建 一 个 【下 方 及 左 侧 嵌 套 框 架 集 】 的 框架 集 ， 如 
图 9-3 所 示 。 
Dw Wi - i = ol x 
ee 
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图 9-3 ”创建 一 个 框架 集 


9.2.2 案例 2 一 一 在 框架 中 添加 内 容 


框架 创建 好 以 后 ， 就 可 以 往 里 面 添加 内 容 了 。 每 个 框架 都 是 一 个 文档 ， 既 可 以 直接 向 框 
架 里 添加 内 容 ， 也 可 以 在 框架 中 打开 已 经 存在 的 文档 。 
具体 操作 步骤 如 下 。 
EEIDp 参照 创建 预定 义 框架 集 的 步 又， 创建 一 个 “上 方 及 左 侧 嵌 套 ”的 框架 集 ， 如 
图 9-4 所 示 。 
国 于 3 将 光标 置 于 顶部 框架 中 ， 选 择 【 修 改 】 一 【页 面 属性 】 菜 单 命 令 ， 弹 出 【页 面 


外 
275@ 


四 
全 216 


Dream Weaver 动态 网 站 开发 


-案例 课堂 四 ~ 


属性 】 对 话 框 ， 从 中 将 左边 距 、 上 边 距 、 右 边 距 和 下 边 距 的 值 都 设置 为 0， 然 后 单 
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图 9-4 创建 一 个 上 方 及 左 侧 的 框架 集 


击 【 确 定 】 按 钮 ， 即 可 设置 页 面 靠 左 并 位 于 项 部， 如 图 9-5 所 示 。 


Hh En 
页 硬件 中， 战 认 字体 
4 可: 刻本 匡 面 
文 +gea 国 
下 好 ao) 国 
全 有 要) 
Bid 


0 


| 
rib | 


#0: 5 en] 


Ti 0): 5 la) 


区 EL CO ER 


图 9-5 【页 面 属性 】 对 话 框 


ECDIS 选择 【插入 】 一 【表格 】 菜 单 命令 ， 在 顶部 框架 中 插入 一 行 两 列 的 表格 ， 如 


图 9-6 所 示 。 


EC 在 每 列 单元 格 中 插入 相应 的 图 像 ， 如 图 9-7 所 示 。 
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9-6 ”插入 表格 


9-7 在 表格 中 插入 图 片 


EECRD) 将 光标 置 于 左 侧 框架 中 ， 选 择 【 修 改 】 一 【页 面 属性 】 菜 单 命 令 ， 弹 出 【页 面 
属性 】 对 话 框 ， 从 中 将 左边 距 、 上 边 距 、 右 边 距 和 下 边 距 的 值 都 设置 为 0， 单 击 


【确定 】 按 钮 ， 如 图 9-8 所 示 。 


TB> 选择 【插入 】-_ 【表格 】 菜 单 命令 ， 插 入 一 


个 两 行 一 列 的 表格 ， 然 后 在 每 行 单 


元 格 中 插入 相应 的 图 像 和 文字 ， 如 图 9-9 所 示 。 


hs) 
页 下 字体 加; 财 认 字 位 "nr 


加 := 区 可 
文本 本 站 : 国 
上 十 色 0 四 | 
Ha); 


重 刘 到 


bm 0 es) bm 0 
Fi): 5 [mes] Fin) 5 


着 避 加 者 河 前 沽 六 一 一 加 语 副 汗 


Lo | CB a LR | 


9-8 【页 面 属性 】 对 话 框 9-9 在 表格 中 添加 图 片 与 文字 


EC 将 光标 置 于 右 侧 框架 中 ， 选 择 【 修 改 】 一 【页 面 属性 】 命 令 ， 弹 出 【页 面 属 
性 】 对 话 框 ， 从 中 将 左边 距 、 上 边 距 、 右 边 距 和 下 边 距 的 值 都 设置 为 0， 单 击 【 确 
定 】 按 钮 ， 如 图 9-10 所 示 。 

BY 选择 【插入 】 一 【表格 】 菜 单 命令 ,插入 一 行 一 列 的 表格 ， 在 表格 中 输入 相应 
的 文字 ， 再 插入 相应 的 表格 ， ttt a 并 输入 相应 的 文字 ， 如 图 9-11 
所 示 。 


背 晤 而 色 [H) 国 
省 要 各 00 
本) 


ee a 
ee 铺 全 和 和 的 给 公 司 ， 
| 


左边 路 9 0 
上 边 距 思 ) 0 


EL 


9-10 ”设置 网 页 的 边 距 9-11 插入 表格 并 添加 表格 数据 


葬 了 EP 选择 【文件 】 一 【保存 全 部 】 菜 单 命令 ， 保 存 网 页 中 的 全 部 内 容 ， 然 后 在 下 浏 
览 器 中 浏览 其 效果 ， 如 图 9-12 所 示 。 
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9.2.3 ”案例 3 一 一 创建 嵌 套 框架 集 


在 一 个 框架 集 之 内 的 框架 集 被 称 作 幅 套 框架 集 。 
集 。 大 多 数 使 用 框架 的 Web 页 实际 上 使 用 的 都 是 嵌 套 的 框架 ， 并 且 在 Dreamweaver CS6 中 大 
多 数 预定 义 的 框架 集 也 都 是 嵌 套 的 。 如 果 在 一 组 框架 里 不 同行 或 不 同 列 中 有 不 同 数目 的 杠 


架 ， 则 要 求 使 用 堪 套 框架 集 。 
创建 谋 套 框架 集 的 具体 步骤 如 下 。 


3CCd 技 术 有 限 公司 ， 是 一 家 集 XCx 素 统 集 成 ，:CCX 了 网 结 解决 广 
i 销售 与 时务 的 综 


Mh 2 和 = 


起 lO0% 


预览 网 页 


EC 将 光标 定位 在 要 插入 顽 套 框架 集 的 框架 中 。 


执行 下 列 任意 一 种 操作 。 


(1) 选择 【修改 】 一 【框架 集 】 一 【 拆 分 左 框架 】、 


或 【 拆 分 下 框架 】 等 命令 ， 如 图 9-13 所 示 。 


(2) 选择 【插入 】 一 HIML 一 【框架 】 菜 单 命令 ， 在 子 菜单 中 选择 一 种 框架 集 类 型 (此 处 


选择 左 对 齐 )。 


【 拆 分 右 框 架 】、 


在 设计 视图 中 的 框架 集中 会 出 现 嵌 套 的 框架 集 ， 如 图 9-14 所 示 。 


EL 


一 个 框架 集 文 件 可 以 包含 多 个 典 套 框架 


【 拆 分 上 框架 】 


PPE 
ma 


Ham 


9-13 ”选择 修改 框架 集 命令 


9-14 ”常见 的 嵌 套 框架 


em 在 设计 视图 文档 窗口 中 选中 框架 后 ， 按 住 鼠 标 左 键 拖 动 框架 的 边框 ， 可 以 垂 


SS 直 或 水 平 折 分 框架 . 


9.2.4 ”案例 4 一 一 创建 浮动 框架 


使 用 浮动 框架 可 以 实现 在 不 修改 原来 网 页 结构 的 基础 上 添加 更 多 的 网 页 内 容 。 创 建 浮动 
框架 的 操作 步骤 如 下 。 
ED 在 Dreamweaver CS6 的 操作 界面 中 ， 将 光标 定位 在 需要 插入 浮动 框架 的 位 置 ， 
如 图 9-15 所 示 。 


沼 避 加 圩 漂 前 沽 集 一 一 名 


图 9-15 ”空白 文档 图 9-16 选择 【标签 】 菜单 命令 


区 了 BY 弹出 【标签 选择 器 】 对 话 框 ， 选 择 【HTML 标签 】 一 【页 面 元 素 】 一 iframe 选 
项 ， 单 击 【插入 】 按 钮 ， 如 图 9-17 所 示 。 

YY 弹出 【标签 编辑 器 】 对 话 框 ， 从 中 单 击 【 源 】 文 本 框 右边 的 【浏览 】 按 钮 ， 弹 
出 【选择 文件 】 对 话 框 ， 在 其 中 选择 需要 插入 的 框架 文件 ， 单 击 【 确 定 】 按 钮 ， 如 


图 9-18 所 示 。 
es sr EE 
一 向 坦 杖 天 0)。 去 未 疝 名 法 点 2 -G3 人 9 
器 二 
和 i wv ke pr ried 
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加 -ES 素 音 小 小 小 
外 -2 素 格 
2 EEE 全 | 
re 杠 
名 AsP mm 村 答 = 
局 JSP 标签 Untted-3 a 1 ld be 
局 Jam 自 定义 床 名 @ 
名 全 镑 | sresm: [i 
SO PE a | 
| et 
| ssssa 
as 
图 9-17 选择 iframe 选项 图 9-18 【选择 文件 】 对 话 框 
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EEC 返回 【标签 编辑 器 】 对 话 框 ， 在 【名 称 】 文 本 框 中 输入 “main htm”， 将 【宽度 】 
设置 为 465，【 高 度 】 设 置 为 350， 如 图 9-19 所 示 。 

EEC 单 击 【 确 定 】 按 钮 ， 关 闭 【标签 编辑 器 】 对 话 框 ， 即 可 插入 浮动 框架 网 页 ， 如 
图 9-20 所 示 。 


25ame - 帝 过 


TE | 
BH: nur J] 

wm 

W350 


图 9-19 【标签 编辑 器 】 对 话 框 图 9-20 ”插入 的 浮动 框架 


9.3 ”保存 框架 和 框架 集 文件 


在 预览 框架 集 之 前 ， 必 须 保存 框架 集 文件 以 及 在 框架 中 显示 的 所 有 文档 。 


9.3.1 案例 5 一 一 保存 所 有 的 框架 集 文件 


选择 【文件 】 一 【保存 全 部 】 菜 单 命令 ， 即 可 保存 所 有 的 文件 (包括 框架 集 文件 和 框架 文 
件 )， 如 图 9-21 所 示 。 


9-21 选择 【保存 全 部 】 菜 单 命令 
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选择 该 命令 ， 如 果 该 框架 集 文件 未 保存 过 ， 则 在 设计 视图 中 的 框架 集 的 周围 将 会 出 现 粗 
边框 和 一 个 对 话 框 ， 用 户 可 从 中 选择 文件 名 。 

Dreamweaver CS6 首先 保存 的 是 框架 集 文件 ， 框 架 集 边框 显示 选择 线 ， 在 保存 文件 对 话 
框 的 文件 名 域 提供 临时 文件 名 UntitledFrameset-1， 用 户 可 以 根据 自己 的 需要 进行 修改 ， 然 后 
单 击 【 保 存 】 按 钮 即 可 。 

随后 系统 才 会 保存 框架 文件 ， 其 文件 名 域 中 的 文件 名 会 变 为 UntitledFrame-4( 依 框架 的 个 
数 的 不 同 而 不 同 )， 在 设计 视图 (文档 窗口 ) 中 的 选择 线 也 会 自动 地 移 到 对 应 的 被 保存 的 框架 中 
( 据 此 可 以 知道 正在 保存 的 是 哪 一 个 框架 文件 )， 然 后 单 击 【 保 存 】 按 钮 ， 直 到 所 有 的 文件 被 保 
存 完 。 


9.3.2 ”案例 6 一 一 保存 框架 集 文件 


在 【框架 】 面 板 或 文档 窗口 中 选择 框架 集 ， 进 行 下 列 操作 之 一 。 

(1) 要 保存 框架 集 文件 ， 可 选择 【文件 】 一 【保存 框架 页 】 菜 单 命令 ， 如 图 9-22 所 示 。 
(2) 要 将 框架 集 文件 另存 为 新 文件 ， 可 选择 【文件 】 一 【框架 集 另 存 为 】 菜 单 命令 。 
如 果 以 前 没有 保存 过 该 框架 集 文 件 ， 那 么 这 两 个 命令 是 等 效 的 。 


EE3 


沼 避 名 圭 漂 前 沽 尝 一 一 加 讨 副 潭 号 笠 沙 “ 翰 6 洲 六 六 
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9-22 ”保存 框架 集 文件 


9.3.3 ”案例 7 一 一 保存 框架 文件 


在 【框架 】 面 板 或 文档 窗口 中 选择 框架 ， 进 行 下 列 操作 之 一 。 

(1) 要 保存 框架 文件 ， 可 选择 【文件 】 一 【保存 框架 页 】 菜 单 命令 。 

(2) 要 将 框架 文件 另存 为 新 文件 ， 可 选择 【文件 】 一 【框架 集 另存 为 】 菜 单 命令 ， 如 
图 9-23 所 示 。 
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图 9-23 保存 框架 文件 


9.4 选中 框架 和 框架 集 


选择 框架 和 框架 集 是 对 框架 页 面 进行 设置 的 第 一 步 ， 之 后 才能 对 框架 和 框架 集 进行 重 命 
名 和 设置 属性 等 操作 。 


9.4.1 案例 8 一 一 认识 【框架 】 面 板 


框架 和 框架 集 是 单个 的 HTML 文档 。 修 改 框架 或 框架 集 的 具体 操作 步骤 是 ， 选 择 【 窗 
口 】 一 【框架 】 菜 单 命令 ， 可 以 打开 【框架 】 面 板 ， 如 图 9-24 所 示 。 


图 9-24 【框架 】 面 板 


9.4.2 ”案例 9 一 一 在 【框架 】 面 板 中 选中 框架 或 框架 集 


在 【框架 】 面 板 中 单 击 要 选中 的 框架 即 可 选中 该 框架 。 当 一 个 框架 被 选中 时 ， 它 的 边框 
纹 会 变 为 虚线 ， 如 图 9-25 所 示 。 
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图 9-25 在 【框架 】 面 板 中 选择 框架 或 框架 集 


9.4.3 ”案例 10 一 一 在 文档 窗口 中 转移 框架 或 框架 集 


在 设计 视图 中 单 击 某 个 框架 的 边框 ， 可 以 选择 该 框架 所 属 的 框架 集 。 当 一 个 框架 集 被 选 
中 时 ， 框 架 集 内 的 所 有 框架 的 边框 线 都 会 变 为 虚线 ， 如 图 9-26 所 示 。 


Dw ee LL 
SA A 


Eee 二 本 加 昌 口 口 . 必 "| 目 . 二 
3 


图 9-26 在 文档 窗口 中 选中 框架 或 框架 集 


要 将 选中 的 框架 或 框架 集 转移 到 另 一 个 框架 ， 可 以 进行 以 下 操作 之 一 。 
(1) 按 Altt 键 和 左 (或 右 ) 箭 头 键 ， 可 将 选择 转移 到 下 一 个 框架 。 

(2) 按 Altt 键 和 上 箭头 键 ， 可 将 选择 转移 到 父 框 架 。 

(3) 按 Altt 键 和 下 箭头 键 ， 可 将 选择 转移 到 子 框架 。 


@。 
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9.5 ”设置 框架 和 框架 集 属 性 


每 个 框架 和 框架 集 都 有 自己 的 【属性 】 面 板 ， 使 用 【属性 】 面 板 可 以 设置 框架 和 框架 集 
的 属性 。 


9.5.1 案例 11 一 一 设置 框架 属性 


设置 框架 属性 的 步骤 如 下 。 
EC 在 【框架 】 面 板 中 单 击 选中 框架 ， 如 图 9-27 所 示 。 
ED 选择 【窗口 】 一 【属性 】 菜 单 命令 ， 打 开 【 属 性 】 面 板 ， 如 图 9-28 所 示 。 
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图 9-27 选中 要 编辑 属性 的 框架 图 9-28 【属性 】 面 板 


在 框架 的 【属性 】 面 板 中 ， 可 以 进行 以 下 设置 。 

(1) 【框架 名 称 】: 在 此 文本 框 中 要 输入 的 是 链接 的 目标 属性 或 脚本 在 引用 该 框架 时 所 
用 的 名 称 。 框 架 名 称 必须 是 单个 词 ， 人 允许 使 用 下 划 线 (_ )， 但 不 允许 使 用 连 字 符 (-)、 句 点 (.) 
和 空格 。 框 架 名 称 必须 以 字母 为 起 始 ， 而 不 能 以 数字 为 起 始 。 框 架 名 称 区 分 大 小 写 。 不 要 使 
用 JavaScript 中 的 保留 字 (比如 right 或 top) 作 为 框架 名 称 。 

(2) 【 源 文件 】: 此 文本 框 用 于 指定 在 框架 中 显示 的 源 文档 。 单 击 【文件 夹 】 图 标 园 可 
以 浏览 文件 ， 然 后 可 以 选择 一 个 文件 。 

(3) 【滚动 】: 此 下 拉 列 表 框 用 于 指定 在 框架 中 是 否 显示 滚动 条 。 将 此 选项 设置 为 【 默 
认 】〗， 将 不 设置 相应 属性 的 值 ， 从 而 使 各 个 浏览 器 使 用 其 默认 值 。 大 多 数 浏览 器 默认 为 【 自 
动 】， 这 意味 着 只 有 在 正 浏览 器 窗口 中 没有 足够 的 空间 来 显示 当前 框架 的 完整 内 容 时 ， 才 显 
示 滚 动 条 。 

(4) 【不 能 调整 大 小 】: 如 果 选 中 此 复 选 框 则 访问 者 无 法 通过 拖 动 框架 边框 在 浏览 器 中 
调整 框架 的 大 小 。 

(5) 【边框 】: 此 下 拉 列 表 框 用 于 设置 在 浏览 器 中 查看 框架 时 显示 或 隐藏 当前 框架 的 边 


框 。 为 框架 设置 【边框 】 选 项 ， 将 覆盖 框架 集 的 边框 设置 。 

【边框 】 下 拉 列 表 中 有 3 个 选项 : 【是 】( 显 示 边 框 )、【 和 否 】( 隐 藏 边框 ) 和 【默认 】。 大 
多 数 浏览 器 默认 为 显示 边框 ， 除 非 父 框架 集 已 将 【边框 】 设 置 为 【和 否 】。 只 有 当 共 享 该 边框 
的 所 有 框架 都 将 【边框 】 设 置 为 【和 否 】 时 ， 或 者 当 父 框 架 集 的 【边框 】 属 性 设置 为 【 否 】 并 
且 共 享 该 边框 的 框架 都 将 【边框 】 设 置 为 【默认 】 时 ， 边 框 才 是 隐藏 的 。 

(6) 【边框 颜色 】: 此 文本 框 可 用 来 为 所 有 框架 的 边框 设置 边框 颜色 。 此 颜色 应 用 于 和 
框架 接触 的 所 有 边框 ， 并 且 重 设 框架 集 的 指定 边框 颜色 。 

(7) 【边界 宽度 】: 使 用 此 文本 框 可 以 像素 为 单位 设置 左边 距 和 右边 距 的 宽度 (框架 边框 
和 内 容 之 间 的 空间 )。 

(8) 【边界 高 度 】: 使 用 此 文本 框 可 以 像素 为 单位 设置 上 边 距 和 下 边 距 的 高 度 (框架 边框 
和 内 容 之 间 的 空间 )。 

| 设置 框架 的 边界 宽度 和 高 度 并 不 等 同 于 选择 【修改 〗 一 【页 面 属性 】 命 令 ， 


提 志 
A 愉 须 在 打开 的 【属性 】 对 话 框 中 设置 框架 边 距 。 


9.5.2 ”案例 12 一 一 设置 框架 集 属性 


在 文档 窗口 的 设计 视图 中 单 击 框架 集中 的 两 个 框架 之 间 的 边框 ， 或 在 【框架 】 面 板 中 单 
f 围 绕 框 架 集 的 边框 ， 就 可 以 选中 框架 集 。 
选择 【窗口 】 一 【属性 】 菜 单 命令 ,打开 【属性 】 面 板 ， 如 图 9-29 所 示 。 
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图 9-29 设置 框架 集 属性 


(1) 【边框 】: 此 下 拉 列 表 框 用 于 确定 在 浏览 器 中 查看 文档 时 在 框架 的 周围 是 否 应 显示 
边框 。 如 果 要 显示 边框 ， 则 选择 【是 】 选 项 ， 如 果 不 显示 边框 ， 则 选择 【 否 】 选 项 。 如 果 允 
许 浏览 器 来 确定 如 何 显示 边框 ， 则 选择 【默认 】 选 项 。 

(2) 【边框 宽度 】: 此 文本 框 用 于 指定 框架 集中 所 有 边框 的 宽度 。 


所 有 宽度 都 是 以 像素 为 单位 指定 的 。 若 指定 的 宽度 对 于 访问 者 查看 框架 集 所 
使 用 的 浏览 器 而 言 太 宽 或 太 窄 ， 框 架 将 按 比 例 伸缩 以 调整 可 用 空间 ， 这 同样 适用 
于 以 像素 为 单位 指定 的 高 度 。 


(3) 【边框 颜色 】: 此 文本 框 用 于 设置 边框 的 颜色 。 可 使 用 颜色 选择 器 选择 一 种 颜色 ， 
或 输入 颜色 的 十 六 进 制 值 。 

若 要 设置 选 定 框架 集 的 各 行 和 各 列 的 框架 大 小 ， 可 以 单 击 【行列 选 定 范 围 】 区 域 左 侧 或 
顶部 的 选项 卡 ， 然 后 在 【 值 】 文 本 框 中 输入 高 度 或 宽度 。 

(4) 【单位 】: 此 下 拉 列 表 框 用 于 指定 浏览 器 分 配给 每 个 框架 的 空间 大 小 ， 包 括 以 下 3 
个 选项 。 
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昼 习 加 填 煤 前 酒 记 一 一 台 斗 避 导 否 许 藻 节 6 波 
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案例 课堂 四 


像素 : 选择 此 选项 时 将 选 定 列 或 行 的 大 小 设置 为 一 个 绝对 值 。 对 于 应 始终 保持 相同 
大 小 的 框架 (例如 导航 条 ) 而 言 ， 此 选项 是 最 佳 选择 。 在 给 以 百分比 或 相对 值 为 单位 指 
定 大 小 的 框架 分 配 空 间 之 前 ， 给 以 像素 为 单位 指定 大 小 的 框架 分 配 空间 。 设 置 框架 
大 小 的 最 常用 的 方法 是 将 左 侧 框架 设置 为 固定 像素 宽度 ， 将 右 侧 框架 大 小 设置 为 相 
对 大 小 ， 这 样 在 分 配 像素 宽度 后 ， 就 能 够 使 右 侧 框架 伸展 以 占据 所 有 的 剩余 空间 。 
百分比 : 选择 此 选项 时 将 指定 选 定 列 或 行 应 相当 于 其 框架 集 的 总 宽度 或 总 高 度 的 百 
分 比 。 以 百分比 为 单位 的 框架 分 配 空 间 是 在 以 像素 为 单位 的 框架 之 后 ， 但 在 将 单位 
设置 为 相对 值 的 框架 之 前 。 

相对 : 选择 此 选项 时 将 指定 在 为 单位 设 成 像素 和 百分比 的 框架 分 配 空 间 之 后 ， 为 选 
定 列 或 行 分 配 其 余 可 用 的 空间 ， 剩 余 的 空间 在 大 小 设置 为 相对 值 的 框架 中 按 比 例 
划分 。 


Br 当 用 户 从 【单位 〗 下 拉 列 表 框 中 选择 【相对 】〗 选 项 时 ， 用 户 在 【 值 〗 文 本 框 
半 ”中 输入 的 所 有 数字 均 消失 ; 如 果 用 户 想 要 指定 一 个 数字 ， 就 必须 重新 输入 。 如 果 
只 有 一 行 或 一 列 设置 为 【相对 】〗， 则 不 需要 输入 数字 ， 因 为 该 行 或 列 在 其 他 行 和 
列 已 分 配 空 间 后 将 接受 所 有 的 剩余 空间 。 为 了 确保 完全 的 跨 浏 览 器 兼容 性 ， 可 以 
在 【 值 〗 文 本 框 中 输入 “1”， 这 等 效 于 不 输入 任何 值 。 
9.5.3 ”案例 13 一 一 改变 框架 的 背景 颜色 
改变 框架 背景 颜色 的 具体 步骤 如 下 。 


ECXDp 将 插入 点 放置 在 框架 中 ， 选 择 【 修 改 】 一 【页 面 属性 】 菜 单 命令 ， 打 开 【 页 面 
属性 】 对 话 框 ， 如 图 9-30 所 示 。 

TY 单 击 【背景 颜色 】 按 钮 辐 ， 在 弹出 的 颜色 选择 器 中 选择 一 种 颜色 ， 然 后 单 击 
【确定 】 按 钮 即 可 ， 如 图 9-31 所 示 。 
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9-30 【页 面 属性 】 对 话 框 9-31 设置 背景 色 


9.6 ”实战 演练 一 一 创建 左右 结构 框架 的 网 页 


本 实例 通过 创建 左右 结构 的 框架 网 页 来 学 习 完 整 创建 框架 网 页 的 方法 。 实 战 本 实例 的 具 
体操 作 步骤 如 下 。 
EC 选择 【文件 】 一 【新 建 】 菜 单 命令 ,打开 【新 建文 档 】 对 话 框 。 在 该 对 话 框 
中 ， 选 择 【 空 白 页 】 选 项 卡 ， 在 【页 面 类 型 】 分 类 下 选择 HTML 选项 ， 在 【布局 】 
分 类 下 选择 【无 】 选 项 ， 如 图 9-32 所 示 。 
EECRP9 单 击 【创建 】 按 钮 ， 创 建 一 个 空白 页 面 ， 如 图 9-33 所 示 。 
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图 9-32 【新 建文 档 】 对 话 框 图 9-33 新建 的 空白 文档 


ECDIS 选择 【插入 】 一 HIML 一 【框架 】 一 【 左 对 齐 】 菜 单 命令 ， 在 文档 中 插入 左 侧 
框架 ， 弹 出 【框架 标签 辅助 功能 属性 】 对 话 框 ， 单 击 【 确 定 】 按 钮 ， 如 图 9-34 
所 示 。 

EEC 保存 框架 页 文件 。 单 击 所 插入 框架 的 边缘 ， 选 中 所 有 的 框架 (选中 的 框架 会 被 虚 
线 包 围 )， 选 择 【 文 件 】 一 【保存 框架 页 】 菜 单 命令 ， 如 图 9-35 所 示 。 


为 每 一 框架 指定 一 个 标题 。 
框架 |mainFrame = 


标题 : mainFrame 


Ctl+Ak+O 


Cn+ShiftrO 


如 果 在 插入 对 象 时 不 想 输 入 此 信息 CrW 
， 造 更 改 -辅助 功能 "首选 参数 。 


Cerl+Shift+W 


Ctrl+s 
Curl+Shift+s 


图 9-34 【框架 标签 辅助 功能 属性 】 对 话 框 图 9-35 保存 框架 页 
EECSRD 打开 【另存 为 】 对话 框 ， 在 【保存 在 】 下 拉 列 表 框 中 选择 ch09 文件 夹 。 文 件 名 
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命名 为 Framesethtm， 然 后 单 击 【 保 存 】 按 钮 ， 即 可 保存 框架 页 文件 ， 如 图 9-36 
所 示 。 

EE9 选择 【窗口 】 一 【框架 】 菜 单 命令 ， 在 【框架 】 面 板 中 单 击 左 侧 框架 ， 选 中 左 
侧 框架 。 单 击 【 源 文件 】 后 的 【浏览 文件 】 按 钮 国 ， 从 images 文件 夹 中 选择 插入 
leftFrame.html 文件 ， 如 图 9-37 所 示 。 


图 9-36 【另存 为 】 对 话 框 图 9-37 选择 要 添加 的 网 页 文件 
EEDD% 右 侧 框架 中 页 面 的 插入 。 参 照 步 又 06， 在 右 侧 框架 中 插入 页 面 right.html， 如 
图 9-38 所 示 。 
EC) 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 效果 ， 如 图 9-39 所 示 。 
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9-38 选择 HTML 文件 图 9-39 ”预览 效果 


如 果 插 入 了 框架 ， 但 在 页 面 中 并 没有 显示 出 来 ， 则 可 通过 选择 【查看 】 一 【可 视 化 助 
理 】 一 【框架 边框 】 菜 单 命令 让 其 显示 出 来 。 如 果 要 隐藏 框架 边框 ， 则 可 重复 前 面 的 操作 。 


9.7 ” 跟 我 练 练 手 


9.7.1 练习 目标 
能 够 熟练 掌握 本 章节 所 讲 内 容 。 
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9.7.2 上 机 练习 


练习 1: 创建 不 同样 式 的 框架 。 
练习 2: 在 框架 中 添加 内 容 。 
练习 3: 保存 框架 与 框架 集 。 
练习 4: 设置 框架 与 框架 集 属性 。 
练习 5: 创建 左右 结构 框架 的 网 页 。 


9.8 高 手 甜 点 


甜点 1: 如何 避免 别人 把 自己 的 网 页 放 在 其 框架 中 ? 


一 些 网 页 设计 者 往往 喜欢 偷窃 别人 的 劳动 成 果 ， 比 如 把 别人 精心 制作 的 网 页 ， 以 子 页 的 
形式 放 到 自己 的 框架 中 。 为 了 尽量 避免 自己 的 网 页 内 容 被 “盗用 ”， 用 户 可 在 网 页 源 代 码 的 
<head> 和 </head> 之 间 加 入 如 下 代码 : 


<script language="javascript"><!-— 
if (self!=top) {top.location=self.location;} 
= aripte 


将 上 述 代码 加 入 之 后 ， 就 可 以 有 效 保护 自己 的 网 页 不 被 别人 放 到 框架 中 使 用 。 
甜点 2: 快速 添加 框架 。 


要 给 框架 页 面 增加 新 框架 ， 就 是 像 拆 分 表格 的 单元 格 一 样 ， 把 一 个 框架 分 为 两 个 框架 。 
其 操作 方法 如 下 。 

按 住 Ctrl 键 ， 将 鼠标 放 在 框架 边框 上 ， 当 鼠标 变 为 上 下 箭头 时 ， 可 把 边框 拖 到 一 个 新 位 
置 ， 当 松 开 鼠标 按钮 时 ， 一 个 新 的 空白 的 框架 就 形成 了 。 
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使 用 模板 可 以 为 网 站 的 更 新 和 维护 提供 极 大 的 方便 ， 仅 修改 网 站 的 模板 即 可 完 
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成 对 整个 网 站 中 页 面 的 统一 修改 。 本 章 就 来 介绍 


一 的 网 页 。 
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10.1 创建 模板 


使 用 模板 创建 文档 可 以 使 网 站 和 网 页 具有 统一 的 结构 和 外 观 。 模 板 实质 上 就 是 作为 创建 


其 他 文档 的 基础 文档 。 在 创建 模板 时 ， 可 以 明确 哪些 网 页 元 素 应 该 长 期 保留 、 不 可 编辑 ， 哪 
些 元 素 可 以 编辑 修改 。 


10.1.1 案例 1 一 一 在 空白 文档 中 创建 模板 


利用 Dreamweaver 的 新 建功 能 可 以 直接 创建 模板 ， 具 体操 作 步 又 如 下 。 
四 TY 选择 【文件 】 一 【新 建 】 菜 单 命令 ， 弹 出 【新 建文 档 】 对 话 框 。 在 【新 建文 


档 】 对 话 框 中 选择 【空白 页 】 选 项 卡 ， 在 【页 面 类 型 】 列 表 框 中 选择 【HTML 模 
板 】 选 项 ， 如 图 10-1 所 示 。 


EEC 单 击 【创建 】 按 钮 即 可 创建 一 个 空白 的 模板 文 要 ， 如 图 10-2 所 示 。 
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图 10-1 【新 建文 档 】 对 话 框 图 10-2 创建 空白 模板 


10.1.2 案例 2 一 一 在 【资源 】 面 板 中 创建 模板 


在 【资源 】 面 板 中 创建 模板 的 具体 步骤 如 下 。 

EC 选择 【窗口 】 一 【资源 】 菜 单 命令 ， 打 开 【 资 源 】 面 板 ， 如 图 10-3 所 示 。 

区 TY 在 【资源 】 面 板 中 ， 单 击 【模板 】 按 钮 图 ，【 资 源 】 面 板 将 变 成 模板 样式 ， 如 
图 10-4 所 示 。 

EEIe) 单 击 【资源 】 面 板 右 下 角 的 【新 建 模 板 】 按 钮 ; 或 在 【资源 】 面 板 的 列表 中 右 
击 ， 在 弹出 的 快捷 菜单 中 选择 【新 建 模板 】 命 令 ， 如 图 10-5 所 示 。 


EC 一 个 新 的 模板 就 被 添加 到 了 模板 列表 中 。 选 中 该 模板 ， 然 后 修改 模板 的 名 称 即 
可 完成 创建 ， 如 图 10-6 所 示 。 
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图 10-3 【资源 】 面 板 图 10-4 ”模板 样式 
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图 10-5 选择 【新 建 模板 】 命 令 图 10-6 ”选中 创建 的 模板 


rm 如 果 要 编辑 创建 完成 的 空白 模板 ， 可 单 击 【编辑 】〗 按 钮 ，Dreamweaver 会 在 
SS 【资源 】 面 板 和 Templates 文件 夹 中 创建 一 个 新 的 空 模板 。 单 击 【资源 】〗 面 板 右 
上 和 角 的 【菜单 〗 按 钮 ;或 在 要 重 命名 的 模板 上 右 击 ， 从 弹出 的 快捷 菜单 中 选择 
【 重 命名 】 命 令 ， 可 以 对 模板 重 命名 。 在 重 命名 模板 时 ，Dreamweaver 的 模板 参 


数 会 自动 地 更 新 使 用 该 模板 的 文档 。 


10.1.3 ”案例 3 一 一 使 用 现 有 文档 创建 模板 


使 用 现 有 文档 创建 模版 的 具体 操作 步骤 如 下 。 

打开 随 书 光 盘 中 的 chl0\index.html 文件 ， 如 图 10-7 所 示 。 

EEI2y 选择 【文件 】 一 【另存 为 模板 】 菜 单 命令 ， 弹 出 【另存 模板 】 对 话 框 ， 在 【站 
点 】 下 拉 列 表 中 选择 保存 的 站 点 “模板 ”， 在 【另存 为 】 文 本 框 中 输入 模板 名 ， 如 
图 10-8 所 示 。 

EEJS 单 击 【保存 】 按 钮 ， 弹 出 提示 框 ， 单 击 【 是 】 按 钮 ， 即 可 将 网 页 文件 保存 为 模 
板 ， 如 图 10-9 所 示 。 
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图 10-7 打开 素材 文件 图 10-8 【另存 模板 】 对 话 框 ”图 10-9 信息 提示 框 


10.1.4 ”案例 4 一 一 创建 可 编辑 区 域 


在 创建 模板 之 后 ， 用 户 需 要 根据 自己 的 具体 要 求 对 模板 中 的 内 容 进行 编辑 ， 即 指定 哪些 
内 容 可 以 编辑 ， 哪 些 内 容 不 能 编辑 (锁定 )。 

在 模板 文档 中 ， 可 编辑 区 是 页 面 中 变化 的 部 分 ， 比 如 “每 日 导读 ”的 内 容 。 不 可 编辑 区 
(锁定 区 ) 是 各 页 面 中 相对 保持 不 变 的 部 分 ， 如 导航 栏 和 栏目 标志 等 。 

当 新 创建 一 个 模板 或 把 已 有 的 文档 存 为 模板 时 ，Dreamweaver CS6 默认 把 所 有 的 区 域 标 
记 为 锁定 ， 因 此 ， 用 户 必须 根据 自己 的 要 求 对 模板 进行 编辑 ， 把 某 些 部 分 标记 为 可 编辑 区 。 

在 编辑 模板 时 ， 可 以 修改 可 编辑 区 ， 也 可 以 修改 锁定 区 。 但 当 该 模板 被 应 用 于 文档 时 ， 
则 只 能 修改 文档 的 可 编辑 区 ， 文 档 的 锁定 区 是 不 允许 被 修改 的 。 

定义 新 的 可 编辑 区 域 的 具体 步骤 如 下 。 

打开 随 书 附 赠 的 光盘 中 的 ch10\Templates\ 模 版 .dwt 文件 ， 如 图 10-10 所 示 。 

EGRDp 将 光标 放置 在 要 插入 可 编辑 区 域 的 位 置 ， 选 择 【 插 入 】 一 【模板 对 象 】 一 【可 

编辑 区 域 】 菜 单 命令 ， 如 图 10-11 所 示 。 


请 注 总 ， 这 些 布局 的 CSS 项 有 大 量 往 程 。 如 时 多 
人 请 快速 测 鉴 一 下 tm， 获 [EE 
你 可 以 先 秆 际 这 些 福 ; 
和 此 CSS 市 局 中 使 用 的 -- 


图 10-10 打开 素材 文件 图 10-11 选择 【可 编辑 区 域 】 菜单 命令 
ECGDB) 弹出 【新 建 可 编辑 区 域 】 对 话 框 ， 在 【名 称 】 文 本 框 中 输入 名 称 ， 如 图 10-12 所 示 。 


5 到 | 命名 一 个 可 编辑 区 域 时 ， 不 能 使 用 单 引号 ()、 双 引号 ()、 类 括号 (< >) 和 
人 等 。 


本 TB 单 击 【 确 定 】 按 钮 即 可 插入 可 编辑 区 域 。 在 模板 中 ， 可 编辑 区 域 会 被 突出 显 
示 ， 如 图 10-13 所 示 。 


省 称 : EditRegion3 
此 区 域 将 可 以 在 基于 读 重 板 的 文档 
宁 进 行 编 禄 。 


图 10-12 【新 建 可 编辑 区 域 】 对 话 框 图 10-13 可 编辑 区 域 
区 E> 选择 【文件 】 一 【保存 】 菜 单 命令 ， 保 存 模板 ， 如 图 10-14 所 示 。 


图 10-14 选择 【保存 】 菜 单 命令 


10.2 管理 模板 


模板 创建 好 后 ， 根 据 实际 需要 可 以 随时 对 进 模板 的 样式 、 内 容 行 更 改 。 更 改 模板 后 ， 
Dreamweaver 会 对 应 用 该 模板 的 所 有 网 页 进行 同时 更 新 。 


10.2.1 案例 5 一 一 从 模板 中 分 离 文 档 


利用 从 模板 中 分 离 功 能 ， 可 以 将 文档 从 模板 中 分 离 ， 分 离 后 ， 模 板 中 的 内 容 依然 存在 。 
文档 从 模板 中 分 离 后 ， 文 档 的 不 可 编辑 区 域 会 变 成 可 编辑 区 ， 这 就 给 修改 网 页 内 容 带 来 很 
大 方便 。 

从 模板 中 分 离 文 档 的 具体 步骤 如 下 。 

EEC 打开 随 书 光 盘 中 的 ch10\ 模 版 .html 文件 ， 从 图 10-15 中 可 以 看 出 页 面 处 于 不 可 编 
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辑 状态 。 
EEIPy 选择 【修改 】 一 【模板 】 一 a 菜单 命令 ， 如 图 10-16 所 示 。 


图 10-15 打开 素材 文件 图 10-16 选择 【从 模板 中 分 离 】 菜 单 命令 


EC) 选择 命令 后 ， 即 可 将 网 页 从 模板 中 分 离 出 来 ， 此 时 即 可 将 图 像 路 径 重 新 设置 ， 
如 图 10-17 所 示 。 


EEC 保存 文档 ， 按 F12 快捷 键 在 下 浏览 器 中 预览 效果 ， 如 图 10-18 所 示 。 


a el 


过 , 这 此 市 后 的 CSS 菏 有 大 量 二 释 、 如 昌 修 的 大 部 分工 
et was TR, WoT 

的 要 水 ， 守 可 以 
Py ws CsS i 


计生 中 性 条 ,请 全 一 下 一 
ir Cr 
使 用 闪 考 布局 CSS 的 提示 。 您 和 雪 及 过 些许 在 上 


清除 方法 


让 本 有 光电 的 ， 瑞 此 半 语 在 boter 入 中 用 
dear both 声明 ， 芝 天内 方法 入 


图 10-17 将 网 页 从 模板 中 分 离 图 10-18 ”预览 网 页 效果 


10.2.2 ”案例 6 一 一 更 新 模板 和 基于 模板 的 网 页 


用 模板 的 最 新 版 本 更 新 整个 站 点 及 应 用 特定 模板 的 所 有 文档 的 具体 步骤 如 下 。 

打开 随 书 光盘 中 的 ch10\Templates\ 模 版 .dwt 文件 ， 如 图 10-19 所 示 。 

EGRP9 将 光标 置 于 模板 需要 修改 的 地 方 ， 并 进行 修改 ， 如 图 10-20 所 示 。 

EGRe) 选择 【文件 】 一 【保存 】 命 令 ， 即 可 保存 更 改 后 的 网 页 。 然 后 打开 应 用 该 模板 
的 网 页 文件 ， 可 以 看 到 更 新 后 的 网 页 ， 如 图 10-21 所 示 。 
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10-20 ”修改 模板 


请 注重， 这 些 市 局 的 CSS 各 有 大 量 福 释 ， 各 果 们 的 大 部 
作 都 在 设计 视图 中 进行 这 人 过 浏 攻 一 下 代码 ， 获 取 有 关 
使 用 入 布局 CSS 的 宰 示 ， 你 可 以 入 基 这 宇和 注 释 , 氏 
动 外 的 站 点。 要 了 解 有 关 这 此 CSS 布局 中 使 用 第 方 水 的 
信息 ， 询 阿 访 Adobe 开 惟 人 册 中 心 上 的 以 下 让 
Httpyharww adohe com/go/ade_ Css layouts. 


清除 方法 


图 10-21 预览 网 页 效果 


10.3 ”实战 演练 一 一 创建 基于 模板 的 页 面 


模板 制作 完成 后 ， 就 可 以 将 其 应 用 到 网 页 中 。 建 立 站 点 my site， 并 将 光盘 中 的 “素材 


\ch13\” 设 置 为 站 点 根 目 录 。 通 过 使 用 模板 ， 能 快速 、 高 效 地 设计 出 风格 一 致 的 网 页 。 


本 实例 的 具体 操作 步骤 如 下 。 

EEC 选择 【文件 】 一 【新 建 】 菜 单 命令 ， 打 开 【 新 建文 档 】 对 话 框 ， 在 【新 建文 
档 】 对 话 框 中 选择 【模板 中 的 页 】 选 项 卡 ， 在 【站 点 】 列 表 框 中 选择 【我 的 站 点 】 
选项 ， 选 择 【 站 点 “我 的 站 点 ”的 模板 】 列 表 中 的 模板 文件 “模版 1”， 如 图 10-22 
所 示 。 

EC) 单 击 【 创 建 】 按 钮 ， 创 建 一 个 基于 模板 的 网 页 文档 ， 如 图 10-23 所 示 。 

ERB) 将 光标 放置 在 可 编辑 区 域 中 ， 选 择 【 插 入 】 一 【表格 】 菜 单 命令 ， 弹 出 【 表 
格 】 对 话 框 ， 将 【 行 数 】 和 【 列 】 都 设置 为 1，【 表 格 宽度 】 设 置 为 95%，【 边 框 
粗细 】 设 置 为 0，【 单 元 格 边 距 】 和 【单元 格 间 距 】 均 设置 为 0， 如 图 10-24 所 示 。 

EC) 单 击 【 确 定 】 按 钮 插入 表格 。 在 【属性 】 面 板 中 ， 将 【对 齐 】 设 置 为 【居中 对 
齐 】， 如 图 10-25 所 示 。 
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[全 


对 入 ,这 各 后 81 CSS 天 有 大 全 省 枉 如果 你 的 大 音 让 工 


作 社 设 计 本 直 进 征 。 请 全 光一 下 代码。 区 有 二 何 
月 汪 二 布 忆 5S5 前 提示 。 亿 可 以 和 于 过 皮 社 阳 ， 类 后 记 
二 了 着 和 CS5 由 使 朋 闻 更 


CR esa Ca CBE 


10-22 【新 建文 档 】 对 话 框 


pi i 
二 要 宇 36 。 | 丙 绪 o] 
这 自从 。 信守 
anwzE 0 国 
#7 轩 


N 回避 


图 10-24 【表格 】 对 话 框 图 10-25 插入 表格 


ECEDDD 将 光标 放置 在 表格 中 ， 输 入 文字 和 图 像 ， 并 设置 文字 和 图 像 的 对 齐 方式 ， 如 
图 10-26 所 示 。 

ECGD 选择 【文件 】 一 【保存 】 菜 单 命 令 ， 打 开 【 另 存 为 】 对 话 框 ， 在 【文件 名 】 下 
拉 列 表 框 中 输入 “index.html”， 单 击 【保存 】 按 钮 ， 如 图 10-27 所 示 。 
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10-26 ”添加 文字 和 图 像 10-27 【另存 为 】 对 话 框 
EC 按 Fl12 键 在 下 浏览 器 中 预览 效果 ， 如 图 10-28 所 示 。 


10-28 ”预览 网 页 效果 


10.4” 跟 我 练 练 手 


10.4.1 练习 目标 
能 够 熟练 掌握 本 章节 所 讲 的 内 容 。 


10.4.2 上 机 练习 


练习 1: 创建 模板 的 各 种 方法 。 
练习 2: 管理 模板 。 
练习 3: 创建 基于 模板 的 页 面 。 


10.5 高 手 甜 点 


甜点 1: 处 理 不 可 编辑 的 模板 。 

为 了 避免 编辑 时 候 误 操作 而 导致 模板 中 的 元 素 发 生变 化 ， 模 板 中 的 内 容 才 默认 为 不 可 编 
辑 状 态 。 只 有 把 某 个 区 域 或 者 某 段 文 本 设置 为 可 编辑 状态 之 后 ， 才 可 以 在 由 该 模板 创建 的 文 
档 中 改变 这 个 区 域 。 具 体操 作 步 又 如 下 。 

ESD 先 用 鼠标 选取 需要 编辑 的 某 个 区 域 ， 然 后 选择 【修改 】 一 【模板 】 一 【 令 属性 

可 编辑 】 命 令 ， 如 图 10-29 所 示 。 
EDy 在 弹出 的 对 话 框 中 选择 【 令 属 性 可 编辑 】 复 选 框 ， 单 击 【 确 定 】 按 钮 ， 如 图 10-30 
所 示 。 


甜点 2: 模板 使 用 技巧 。 


使 用 模板 可 以 为 网 站 的 更 新 和 维护 提供 极 大 的 方便 ， 只 修改 网 站 的 模板 便 可 完成 对 整个 
网 站 中 页 面 的 统一 修改 。 模 板 的 使 用 难点 是 如 何 合理 地 设置 和 定义 模板 的 可 编辑 区 域 。 要 想 


荡 其 注 窜 一 一 沼 到 号 | 淤 未 双方 址 各 六 直 0+ 小 上 
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把 握 好 这 一 点 ， 在 定义 模板 的 可 编辑 区 域 时 ， 一 定 要 仔细 地 研究 整个 网 站 中 各 个 页 面 所 具有 
的 共同 风格 和 特性 。 只 有 这 样 ， 才 能 设计 出 适合 网 站 使 用 的 合理 模板 。 使 用 库 项 目 可 以 完成 
对 网 站 中 某 个 板块 的 修改 。 利 用 这 些 功 能 不 仅 可 以 提高 工作 效率 ， 还 可 以 使 网 站 的 更 新 和 维 
护 等 烦琐 的 工作 变 得 更 加 轻松 。 


选择 此 人 标签 的 思 些 岳 性 应 是 可 编辑 的 。 


ir | [添加 
园 全 记性 可 绩 回 


车 要 基于 此 模板 在 页 中 更 改 此 局 性 的 值 ， 
请 选择 "个 改 >” 模板 属性 "< 


要 更 改 该 局 性 是 否 可 编辑 ， 请 再 次 使 用 "使 
后 性 可 编辑 命 会 。 


图 10-29 选择 【 令 属性 可 编辑 】 命 令 图 10-30 可 编辑 区 域 
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第 2 篇 
网 页 美化 与 布局 


外 第 11 章 读 懂 样式 表 密码 一 一 使 用 CSS 样式 表 美 化 
网 页 

和 a 第 12 章 架构 师 的 大 比拼 一 一 网 页 布局 典型 案例 

外 第 13 章 让 别人 浏览 我 的 成 果 一 一 网 站 的 发 布 


样式 不 仅 可 以 对 单个 页 
一 的 效果 。 


， 还 可 以 对 多 个 页 面 使 用 相同 的 样式 进行 修饰 ， 以 达到 统 


本 章 就 来 介绍 一 下 如 何 


网 页 。 


使 用 CSS 样式 表 美 化 


使 用 CSS 技术 可 以 对 文档 进行 精细 的 页 面 美化 。CSS 


面 进 行 格式 化 
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11.1 初 识 CSS 


现在 ， 网 页 的 排版 格式 越 来 越 复杂 ， 样 式 也 越 来 越 多 。 通 过 CSS 样式 ， 很 多 美观 的 效果 
都 可 以 实现 。 应 用 CSS 样式 制作 出 的 网 页 会 给 人 一 种 条 理 清 晰 、 格 式 漂 亮 、 布 局 统一 的 感 
觉 ， 加 上 多 种 字体 的 动态 效果 ， 会 使 网 页 变 得 更 加 生动 有 趣 。 


11.1.1 CSS 概述 


CSS(Cascading Style Sheeb， 中 文 名 为 层 登 样式 表 ， 也 可 以 被 称 为 CSS 样式 表 或 样式 表 ， 
其 文件 扩展 名 为 .css。CSS 是 用 于 增强 或 控制 网 页 样式 ， 并 允许 将 样式 信息 与 网 页 内 容 分 离 的 
一 种 标记 性 语言 。 

引用 样式 表 的 目的 是 将 “网 页 结构 代码 ”和 “网 页 样式 风格 代码 ”分 离 ， 从 而 使 网 页 设 
计 者 可 以 对 网 页 布局 进行 更 多 的 控制 。 利 用 样式 表 ， 可 以 将 整个 站 点 上 的 所 有 网 页 都 指向 某 
个 CSS 文件 ， 设 计 者 只 需要 修改 CSS 文件 中 的 某 一 行 ， 整 个 网 页 上 对 应 的 样式 都 会 随 之 发 生 
相同 的 改变 。 


11.1.2 CSS 的 作用 


CSS 样式 可 以 一 次 对 若干 个 文档 的 样式 进行 控制 。 当 CSS 样式 更 新 后 ， 所 有 应 用 了 该 样 
式 的 文档 都 会 自动 更 新 。 可 以 说 ，CSS 在 现代 网 页 设计 中 是 必 不 可 少 的 工具 之 一 。 
CSS 的 优越 性 有 以 下 几 点 。 


1. 分 离 了 格式 和 结构 


HTML 并 没有 严格 地 控制 网 页 的 格式 或 外 观 ， 仅 定义 了 网 页 的 结构 和 个 别 要 素 的 功能 ， 
其 他 部 分 让 浏览 器 自己 决定 应 该 让 各 个 要 素 以 何 种 形式 显示 。 但 是 ， 随 意 使 用 HTML 样式 会 
导致 代码 混乱 ， 编 码 会 变 得 腑 肿 不 堪 。 

CSS 解决 了 这 个 问题 ， 它 将 定义 结构 的 部 分 和 定义 格式 的 部 分 分 离 ， 从 而 对 页 面 的 布局 
能 够 施加 更 多 的 控制 。 通 俗 地 讲 ， 就 是 把 CSS 代码 独立 出 来 ， 从 另 一 个 角度 来 控制 页 面 
外 观 。 


2. 控制 页 面 布局 


HTML 中 的 <font size> 代 码 能 调整 字号 ， 表 格 标签 可 以 生成 边 距 ， 但 是 ， 总 体 上 的 控制 却 
很 有 限 ， 比 如 它 不 能 精确 地 生成 80 像素 的 高 度 ， 不 能 控制 行 间距 或 字 间距 ， 不 能 在 屏幕 上 精 
确 地 定位 图 像 的 位 置 ， 而 CSS 就 可 以 使 这 一 切 都 成 为 可 能 。 

3. 制作 出 更 小 、 下 载 更 快 的 网 页 

CSS 只 是 简单 的 文本 ， 就 像 HTML 那样 ， 它 不 需要 图 像 ， 不 需要 执行 程序 ， 不 需要 插 
件 ， 不 需要 流 式 。 有 了 CSS 之 后 ， 以 前 必须 求助 于 GIF 格式 的 ， 现 在 通过 CSS 可 以 自己 实 


现 。 此 外 ， 使 用 CSS 还 可 以 减少 表格 标签 及 其 他 加 大 HTML 体积 的 代码 ， 减 少 图 像 用 量 ， 从 
而 减 小 文件 的 大 小 。 

4. 便于 维护 及 更 新 大 量 的 网 页 

如 果 没 有 CSS， 要 更 新 整个 站 点 中 所 有 主体 文本 的 字体 ， 就 必须 一 页 一 页 地 修改 网 页 。 


CSS 则 是 将 格式 和 结构 分 离 ， 利 用 样式 表 可 以 将 站 点 上 所 有 的 网 页 都 指向 单一 的 一 个 CSS 文 
件 ， 只 要 修改 CSS 文件 中 的 某 一 行 ， 整 个 站 点 就 都 会 随 之 发 生 相 同 的 变动 。 


5. 使 浏览 器 成 为 更 友好 的 界面 


CSS 的 代码 有 很 好 的 兼容 性 ， 比 如 丢失 了 某 个 插件 时 不 会 发 生 中 断 ， 或 者 使 用 低 版 本 的 
浏览 器 时 代码 不 会 出 现 杂乱 无 章 的 情况 。 只 要 是 可 以 识别 CSS 的 浏览 器 ， 就 可 以 应 用 CSS。 


11.1.3 CSS 的 基本 语法 


CSS 样式 表 由 若干 条 样式 规则 组 成 。 这 些 样式 规则 可 以 应 用 到 不 同 的 元 素 或 文档 ， 从 而 
定义 它们 显示 的 外 观 。 每 一 条 样式 规则 由 3 个 部 分 构成 :选择 符 (selector)、 属 性 (properties) 和 
属性 值 (value)。 其 基本 格式 如 下 。 


selector{property: value} 


@ selector 选择 符 : 采用 多 种 形式 ， 可 以 为 文档 中 的 HTML 标记 ,例如 <body>、 
<table>、<p> 等 ， 但 是 也 可 以 是 XML 文档 中 的 标记 。 
@ ”property 属性 : 是 选择 符 指定 的 标记 所 包含 的 属性 。 
e@ ”value: 指定 了 属性 的 值 。 
如 果 定 义 选 择 符 的 多 个 属性 ， 则 属性 和 属性 值 为 一 组 ， 组 与 组 之 间 用 分 号 () 隔 开 。 其 基 
本 格式 如 下 : 


selector{propertyl: valuel; property2: Value27.… } 
下 面 就 给 出 一 条 样式 规则 : 
p{color:red} 


该 样式 规则 中 的 选择 符 p， 为 段落 标记 <p> 提 供 样式 ，color 为 指定 文字 颜色 属性 ，red 为 
属性 值 。 此 样式 表示 标记 <p> 指 定 的 段落 文字 为 红色 。 
如 果 要 为 段落 设置 多 种 样式 ， 则 可 以 使 用 下 列 语句 : 


p{font-family:" 素 书 "; color:red; font-size:40px; font-weight:bold} 


11.2 ”使 用 CSS 样式 美化 网 页 


在 使 用 CSS 样式 的 属性 美化 网 页 元 素 之 前 ， 需 要 先 定 义 CSS 样式 的 属性 。CSS 样式 常用 
的 属性 包括 字体 、 广 本、 背景、 链接 、 样 式 等 。 
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11.2.1 案例 1 一 一 使 用 字体 样式 美化 文字 


CSS 样式 的 字体 属性 用 于 定义 文字 的 字体 、 大 小 、 粗 细 的 表现 等 。 其 中 ，font 用 于 统一 
定义 字体 的 所 有 属性 。 各 字体 的 属性 如 下 。 


1. font-family 属性 


使 用 font-family 属性 ， 可 以 同时 定义 多 种 字体 ， 比 如 ， 中 文 的 宋体 ， 英 文 的 Arial， 代 码 
如 下 : 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CSS font-family 属性 示例 </title> 
<style type="text/css" media="all"> 
p#songti{font-family:" 宋 体 ";} 
p#Arial{font-family:Arial;} 
p#all{font-family: "宋体 ",Arial;} 
</style> 

</head> 

<body> 

<p id="songti"> 使 用 宋体 .</p> 

<p id="Arial"> 使 用 arial 字体 .</p> 
</body> 

</html> 


2. font-size 属性 


font-size 属性 : 定义 字体 大 小 。 

HTML 的 big、small 标签 定义 了 大 字体 和 小 字体 的 文字 ， 此 标签 已 被 W3C 抛弃 ， 真 正 
符合 标准 网 页 设计 的 显示 文字 大 小 的 方法 是 使 用 font-size CSS 属性 。 在 浏览 器 中 可 以 使 用 
Ctrl++ 增 大 字体 ，Ctl-- 缩 小 字体 。 

下 面 通过 一 个 例子 来 认识 font-size 属性 ， 代 码 如 下 : 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>Css font-size 属性 绝对 字体 尺寸 示例 </title> 
<style type="text/css" media="all"> 
p{font-size:12px;} 
p#xxsmall{font-size:xx-small;} 
p#xsmall{font-size:x-small;} 
p#small{font-size:small;} 
p#medium{font-size:medium;} 
p#xlarge{font-size:x-large; } 
p#xxlarge{font-size:xx-large;} 

</style> 

</head> 

<body> 

<p id="xxsmall">font-size 中 的 xxsmall 字体 </p> 
<p id="xsmall">font-size 中 的 xsmall 字体 </p> 
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<p id="small">font-size 中 的 small 字体 </p> 

<p id="medium">font-size 中 的 medium 字体 </p> 
<p id="xlarge">font-size 中 的 xlarge 字体 </p> 
<p id="xxlarge">font-size 中 的 xxlarge 字体 </p> 


3. font-style 属性 


font-style 属性 : 定义 斜体 字 。 

网 页 中 的 字体 样式 都 是 不 固定 的 ， 开 发 者 可 以 使 用 font-style 来 实现 目的 ， 其 属性 包含 如 
下 内 容 。 

e@ ”normal: 正常 的 字体 ， 即 浏览 器 默认 状态 下 的 字体 。 

@ italic: 斜体 。 对 于 没有 和 斜体 变量 的 特殊 字体 ， 将 应 用 oblique。 

@ “oblique: 倾斜 的 字体 ， 即 没有 斜体 变量 。 

下 面 通过 一 个 例子 来 认识 font-style 属性 ， 代 码 如 下 : 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CSS font-style 属性 示例 </title> 

<style type="text/css" media="all"> 

p#normal{font-style:normal;} 

p#italic{font-style:italic;} 

p#oblique{font-style:oblique;} 

</style> 

</head> 

<body> 

<p id="normal"> 正 常 字体 .</p><p id="italic"> 斜 体 .</p><p id="oblique"> 斜 体 .</p> 
</body> 

</html> 


4. font-variant 属性 


font-variant 属性 : 定义 小 型 的 大 写字 母 字体 ， 对 中 文 没什么 意义 。 

在 网 页 中 常常 可 以 碰 到 需要 输入 内 容 的 地 方 ， 如 果 输 入 汉字 的 话 是 没 问题 的 ， 可 是 当 需 
要 输入 英文 时 ， 那 么 它 的 大 小 写 是 令 我 们 最 头疼 的 问题 。 在 CSS 中 可 以 通过 font-variant 的 
几 个 属性 来 实现 输入 时 不 受 其 限制 的 功能 ， 其 属性 如 下 。 

e@ ”Normal: 正常 的 字体 ， 即 浏览 器 默认 状态 下 的 字体 。 

@ ”small-caps: 定义 小 型 的 大 写字 母 。 

下 面 通过 一 个 例子 来 认识 font-variant 属性 ， 代 码 如 下 : 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 

<title>CSS font-variant 属性 示例 </title> 

<style type="text/css" media="all"> 

p#small-caps{font-variant:small-caps;} 

p#uppercase{text-transform:uppercase;} 

</style> 
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</head> 
<body> 
<p id="small-caps">The quick brown fox jumps over the lazy dog.</p> 
<p id="uppercase">The quick brown fox jumps over the lazy dog.</p> 
</body> 
</html> 


5. font- weight 属性 


font- weight 属性 : 定义 字体 的 粗细 。 其 属性 值 如 下 。 

Normal: 正常 ， 等 同 于 固定 值 在 400 以 下 的 。 

Bold: 粗 体 ， 等 同 于 固定 值 在 500 以 上 的 。 

Normal: 正常 ， 等 同 于 400。 

Bold: 粗 体 ， 等 同 于 700。 

Bolder: 更 粗 。 

Lighter: 更 细 。 

100 |200 | 300 | 400 | 500 | 600 | 700 | 800 | 900: 字体 粗细 的 绝对 值 。 
下 面 通过 一 个 例子 来 认识 font-weight 属性 ， 代 码 如 下 : 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CSS font-weight 属性 示例 </title> 

<style type="text/css" media="all"> 

p#normal 

{font-weight: normal;} 

p#bold{font-weight: bold;} 

p#bolder{font-weight: bolder;} 

p#lighter{font-weight: lighter;} 

p#100{font-weight: 100;} 

</style> 

</head> 

<body> 

<p id="normal">font-weight: normal</p><p id="bold">font-weight: bold</p> 
<p id="bolder">font-weight: bolder</p> 

<p id="lighter">font-weight: lighter</p><p id="100">font-weight: 100</p> 
</body> 

</html> 


11.2.2 ”案例 2 一 一 使 用 文本 样式 美化 文本 


CSS 样式 的 文本 属性 用 于 定义 文字 、 空 格 、 单 词 、 段 落 的 样式 。 其 文本 属性 如 下 。 
1. letter-spacing 属性 

letter-spacing 属性 : 定义 文本 中 字母 的 间距 (中 文 为 文字 的 间距 )。 

该 属性 在 应 用 时 有 以 下 两 种 情况 。 


®@ Normal: 默认 间距 ， 主 要 由 用 户 所 使 用 的 浏览 器 等 设备 决定 。 
® ”<length>: 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 允 许 为 负 值 。 
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下 面 通过 一 个 例子 来 认识 letter-spacing 属性 ， 代 码 如 下 : 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CSS letter-spacing 属性 示例 </title> 

<style type="text/css" media="all"> 

-ls3px{letter-spacing: 3px;} 

.lsn3px{letter-spacing: -3px;} 

</style> 

</head> 

<body> 

<p class="1S3PX"> 
<strong><ahref="http://www.dreamdu.com/css/property letter- 
spacing/">letter-spacing</a> 示 例 :</strong> 

<p>All i have to do，is learn CSS. (仔细 看 是 字母 之 间 的 距离 , 不 是 空格 本 身 的 宽 
度 。) </p> 

</p> 

<p> 

<strong><ahref="http://www.dreamdu.com/css/property letter- 
spacing/">letter-spacing</a> 示 例 :</strong> 

<p class="1sn3px">R11 i have to do, is learn CSS.</p> 

</p> 

</body> 

</html> 
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2. word-spacing 属性 


word-spacing 属性 : 定义 以 空格 间隔 文字 的 间距 (就 是 空格 本 身 的 宽度 )。 
该 属性 在 应 用 时 有 以 下 两 种 情况 。 

@ Normal: 默认 间距 ， 即 浏览 器 的 默认 间距 。 

@ ”<length>: 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 允 许 为 负 值 。 
下 面 通过 一 个 例子 来 认识 word-spacing 属性 ， 代 码 如 下 : 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CSS word-spacing 属性 示例 </title> 

<style type="text/css" media="all"> 

.Ws30{word-spacing: 30px;} 

.wsn30{word-spacing: -10px;} 

</style> 

</head> 

<body><p><strong>word-spacing 示例 :</strong> 

<p class="ws30">R11 i have to do, is learn CSS.</p></p><p> 
<strong>word-spacing 示例 :</strong><p class="wsn30">All i have to do, is 
learn 

Css.</p> 

</p> 

</body> 

</html> 
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3. text-dewration 属性 


text-decoration 属性 : 定义 文本 是 否 有 下 划 线 以 及 下 划 线 的 方式 。 
该 属性 在 应 用 时 有 以 下 4 种 情况 。 

e@ Underline: 定义 有 下 划 线 的 文本 。 

@ ”Overline: 定义 有 上 划 线 的 文本 。 

@ “line-through: 定义 直线 穿 过 文本 。 

@ blink: 定义 闪烁 的 文本 。 

下 面 通过 一 个 例子 来 认识 text-description 属性 ， 代 码 如 下 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CSS text-decoration 属性 示例 </title> 

<style type="text/css" media="all"> 

p#line-through{text-decoration: line-through;} 

</style> 

</head> 

<body> 

<p id="line-through"> 示 例 <a href="#">CSS 教程 </a>,<strong><a 
href="#">text-decoration</a></strong> 示 例 ,属性 值 为 1ine-through 中 画 线 .</p> 
</body> 

</html> 


4. text-transform 属性 


text-transform 属性 : 定义 文本 的 大 小 写 状态 ， 此 属性 对 中 文 无 意义 。 
该 属性 在 应 用 时 有 以 下 4 种 情况 。 

e@ ”Capitalize: 首 字母 大 写 。 

@ ”Uppercase: 将 所 有 设 定 此 值 的 字母 变 为 大 写 。 

@ Lowercase: 将 所 有 设 定 此 值 的 字母 变 为 小 写 。 

@ None: 正常 无 变化 ， 即 输入 状态 。 

下 面 通过 一 个 例子 来 认识 text-transform 属性 ， 代 码 如 下 : 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>css text-transform 属性 示例 </title> 

<style type="text/css" media="all"> 

p#capitalize{text-transform: capitalize; } 
p#uppercase{text-transform: uppercase; } 
p#lowercase{text-transform: lowercase; } 

</style> 

</head> 

<body> 

<p id="capitalize">hello world</p><p id="uppercase">hello world</p> 
<p id="lowercase">HELLO WORLD</p> 

</body> 

</html> 
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5. text-align 属性 


text-align 属性 : 定义 文本 的 对 齐 方式 。 

该 属性 在 应 用 时 有 以 下 4 种 情况 。 

e@ 。 Left， 对 于 当前 块 的 位 置 为 左 对 齐 。 

@ 。 Right， 对 于 当前 块 的 位 置 为 右 对 齐 。 

e@ Center: 对 于 当前 块 的 位 置 为 居中 。 

@ Justify: 对 齐 每 行 的 文字 。 

下 面 通过 一 个 例子 来 认识 text-align 属性 ， 代 码 如 下 : 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CSS text-align 属性 示例 </title> 
<style type="text/css" media="all"> 
p#left{text-align: left; } 

</style> 

</head> 

<body> 

<p id="left">left 左 对 齐 </p> 

</body> 

</html> 


6. text-indent 属性 


text-indent 属性 : 定义 文本 的 首 行 缩 进 (在 首 行文 字 前 插入 指定 的 长 度 )。 

该 属性 在 应 用 时 有 以 下 2 种 情况 。 

@ ”<length>: 百分比 数字 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 允 许 为 负 值 。 
@ ”<percentage>: 百分比 表示 法 。 

下 面 通过 一 个 例子 来 认识 text-indent 属性 ， 代 码 如 下 : 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CSS text-indent 属性 示例 </title> 

<style type="text/css" media="all"> 

p#indent {text-indent:2em;top:10px;} 

p#unindent {text-indent:-2em;top:210px;} 

p{width:150px;margin:3em;} 

</style> 

</head> 

<body> 

<p id="indent"> 示 例 <a href="#">CSS 教程 </a>, <strong><a 
href="#">text-indent</a></strong> 示 例 , 正 值 向 后 缩 , 负 值 向 前 进 .text-indent 属性 可 以 
定义 首 行 的 缩 进 , 是 我 们 经 常 使 用 到 的 css 属性 .</p> 

<p id="unindent"> 示 例 <a href="#">CSS 教程 </a>, <strong><a 
href="#">text-indent</a></strong> 示 例 , 正 值 向 后 缩 , 负 值 向 前 进 .</p> 

</body> 

</html> 
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11.2.3 ”案例 3 一 一 使 用 背景 样式 美化 背景 


在 CCS 中 ， 定 义 文字 颜色 可 以 使 用 color 属性 ， 而 包含 文字 的 p 段落 、div 层 、page 页 面 
等 的 颜色 与 背景 图 片 的 定义 可 以 使 用 背景 (background) 属 性 。 
背景 属性 如 下 。 


1. background-color 属性 


background-color 属性 : 背景 色 ， 定 义 背景 颜色 。 其 值 如 下 。 

@ ”<color>: 颜色 表示 法 ， 可 以 是 数值 表示 法 ， 也 可 以 是 颜色 名 称 。 
@ Transparent: 背景 色 透 明 。 

下 面 通过 一 个 例子 来 认识 background-color 属性 。 

定义 网 页 的 背景 使 用 绿色 ， 内 容 白字 黑 底 ， 示 例 代码 如 下 : 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CSS background-color 属性 示例 </title> 
<style type="text/css" media="all"> 
body{background-color:green;} 
hl{color:white;background-color:black;} 
</style> 

</head> 

<body> 

<h1> 白 字 黑 底 </h1> 

</body> 

</html> 


2. background-image 属性 


background-image 属性 : 定义 背景 图 像 。 其 值 如 下 。 

@ ”<uri>: 使 用 绝对 地 址 或 相对 地 址 指定 背景 图 像 。 

@ None: 将 背景 设置 为 无 背景 状 。 

下 面 通过 一 个 例子 来 认识 background-image 属性 ， 代 码 如 下 : 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CSS background-image 属性 示例 </title> 

<style type="text/css" media="all"> 

.para{background-image:none; width:200px; height:70px;} 
.div{width:200px; color:#FFF; font-size:40px; 
font-weight:bold;height:200px;background-image:url (flowerl.jpg);} 
</style> 

</head> 

<body> 

<div class="para">div 段落 中 没有 背景 图 片 </div> 

<div class="div">div 中 有 背景 图 片 </div> 

</body> 

</html> 


3. background-repeat 属性 


background-repeat 属性 : 定义 背景 图 像 的 重复 方式 。 

在 默认 情况 下 ， 图 像 会 自动 向 水 平和 竖 直 两 个 方向 平 铺 。 如 果 不 希望 平 铺 ， 或 者 希望 沿 
着 一 个 方向 平 铺 ， 可 以 使 用 background-repeat 属性 实现 。 该 属性 可 以 设置 为 以 下 4 种 平 铺 
方式 5 

@ ”Repeat: 平 铺 整个 页 面 ， 左 右 与 上 下 。 

e@ repeat-x: 在 X 轴 上 平 铺 ， 左 右 。 

e@ repeat-y: 在 Y 轴 上 平 铺 ， 上 下 。 

@ ”no-repeat: 当 背 景 大 小 比 所 要 填充 背景 的 块 小 时 图 片 不 重复 。 

下 面 通过 一 个 例子 来 认识 background-repeat 属性 ， 代 码 如 下 : 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CSS background-repeat 属性 示例 </title> 

<style type="text/css" media="all"> 
body{background-image:url('images/small.jpg');background-repeat:no-repeat;} 
p{background-image:url('images/small.jpg');background-repeat:repeat-— 
y’;backgroun 
d-position:right;top:200px;left:200px;width:300px;height:300px;border:1px 
solid 

black; margin-left:150px;} 

</style> 

</head> 

<body> 

<p> 示 例 css 教程 ，repeat-y 竖 着 重复 的 背景 (div 的 右 侧 ) .</p> 

</body> 

</html> 
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4. background-position 属性 


background-position 属性 : 定义 背景 图 像 的 位 置 。 
将 标题 居中 或 者 右 对 齐 可 以 使 用 background-postion 属性 ， 其 值 如 下 。 
(1) 水 平方 向 。 

e@ left 对 于 当前 填充 背景 位 置 居 左 。 

@ center: 对 于 当前 填充 背景 位 置 居中 。 

e@ right: 对 于 当前 填充 背景 位 置 居 右 。 

(2) 垂直 方向 。 

@ ”top: 对 于 当前 填充 背景 位 置 居 上 。 

@ center: 对 于 当前 填充 背景 位 置 居中 。 

@ ”bottom: 对 于 当前 填充 背景 位 置 居 下 。 

(3) 垂直 与 水 平 的 组 合 ， 代 码 如 下 : 


= 本 各 
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下 面 通过 一 个 例子 来 认识 background-position 属性 ， 代 码 如 下 : 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CSS background-position 属性 示例 </title> 

<style type="text/css" media="all"> 

body{background-image:url ('images/small.jpg') ;background-repeat:no-repeat;} 
p{background-image:url('images/small.jpg') ;background-position:right 
bottom ;background-repeat:no-repeat;border:1lpx solid 
black;width:400px;height:200px; margin-left:130px;} 
div{background-image:url('images/small.jpg');background-position:50% 


20% ;background-repeat:no-repeat;border:lpx solid 
black;width:400px;height:150px;} 

</style> 

</head> 

<body> 

<p>p 段落 中 右 下 角 显 示 橙色 的 点 .</p> 

<div>div 中 距 左 上 角 x 轴 50%,y 轴 20s8 的 位 置 显示 橙色 的 点 .</div> 
</body> 

</html> 


5. background-attachment 属性 


background-attachment 属性 : 定义 背景 图 像 随 滚动 轴 的 移动 方式 。 
设置 或 检索 背景 图 像 是 随 对 象 内 容 滚动 还 是 固定 的 ， 其 值 如 下 。 
@ ”Scroll: 随 着 页 面 的 滚动 ， 背 景 图 片 将 移动 。 

@ ”Fixed: 随 着 页 面 的 滚动 ， 背 景 图 片 不 会 移动 。 

下 面 通过 一 个 例子 来 认识 background-attachment 属性 ， 代 码 如 下 : 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CSS background-attachment 属性 示例 </title> 

<style type="text/css" media="all"> 

body{background:url ('images/list-orange.png')’;background-— 
attachment :fixed;backg 

round-repeat :repeat-x;background-position:center 
center;position:absolute;height:400px;} 

</style> 

</head> 

<body> 

<p> 拖 动 滚动 条 , 并 且 注 意 中 间 有 一 条 橙色 线 并 不 会 随 滚动 条 的 下 移 而 上 移 .</p> 
</body> 

</html> 


11.2.4 ”案例 4 一 一 使 用 链接 样式 美化 链接 
在 HTML 语言 中 ， 超 链接 是 通过 标签 <a> 来 实现 的 ， 链 接 的 具体 地 址 则 是 利用 <a> 标 签 的 


href 属性 ， 代 码 结构 如 下 : 


<a href="http://www.baidu.com"> 链 接 文本 </a> 


在 浏览 器 默认 的 浏览 方式 下 ， 超 链接 统一 为 蓝 色 并 且 有 下 划 线 ， 被 单 击 过 的 超 链接 则 为 
紫色 ， 其 下 也 有 下 划 线 。 这 种 最 基本 的 超 链接 样式 现在 已 经 无 法 满足 广大 设计 师 的 需求 。 通 
过 CSS 可 以 设置 超 链接 的 各 种 属性 ， 而 且 通 过 伪 类 别 还 可 以 制作 很 多 动态 效果 。 首 先 用 最 简 
单 的 方法 去 掉 超 链接 的 下 划 线 ， 代 码 如 下 : 

/* 超 链接 样式 * / 

a{text-decoration:none; margin-left:20px;} /* 去 掉 下 划 线 */ 

可 制作 动态 效果 的 CSS 伪 类 别 属性 如 下 。 

e “a:link: 超 链接 的 普通 样式 ， 即 正常 浏览 状态 的 样式 。 

e@ ”aivisited: 被 单 击 过 的 超 链接 的 样式 。 

e@ ahover: 鼠标 指针 经 过 超 链 接 上 时 的 样式 。 

®@ “a:active: 在 超 链接 上 单 击 时 ， 即 “当前 激活 ”时 超 链接 的 样式 。 


11.2.5 “案例 5 一 一 使 用 列表 样式 美化 列表 


CSS 列表 属性 可 以 改变 HIML 列表 的 显示 方式 。 
通常 列表 主要 采用 <ul> 或 者 <ol> 标 签 ， 然 后 配合 <li> 标 签 罗列 各 个 项 目 。CSS 列表 有 以 
下 几 个 常见 属性 。 


1. list-style-image 属性 


list-style-image 属性 : 用 于 设置 或 检索 作为 对 象 的 列表 项 标记 的 图 像 。 其 值 如 下 。 
e@ URI: 一 般 是 一 个 图 片 的 网 址 。 

e@ ”None: 不 指定 图 像 。 

示例 代码 如 下 : 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>cSss 1ist-style-image 属性 示例 </title> 

<style type="text/css" media="all"> 

ul{list-style-image: url("images/list-orange.png");} 
</style> 

</head> 

<body> 

<ul> 

<1i> 使 用 图 片 显示 列表 样式 </1i> 

<1i> 本 例 中 使 用 了 1ist-orange.png 图 片 </1i> 

<1i> 我 们 还 可 以 使 用 1ist-green.png top.png 或 up.png 图 片 </1i> 
<1i> 大 家 可 以 尝试 修改 下 面 的 代码 </1i> 

</ul> 

</body> 

</html> 
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2. list-style-position 属性 


list-style-position 属性 : 用 于 设置 或 检索 作为 对 象 的 列表 项 标记 如 何 根 据 文本 排列 。 
如 下 。 

@ Inside: 列表 项 目标 记 放置 在 文本 以 内 ， 且 环绕 文本 根据 标记 对 齐 。 

e@ ”Outside: 列表 项 目标 记 放置 在 文本 以 外 ， 且 环绕 文本 不 根据 标记 对 齐 。 

示例 代码 如 下 : 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CSsS 1ist-style-position 属性 示例 </title> 

<style type="text/css" media="all"> 
ul#inside{list-style-position: inside;list-style-image: 
url("images/list-orange.png");} 
ul#outside{list-style-position: outside;list-style-image: 
url("images/list-green.png");} 

p{padding: 07margin: 0;} 

li{border:lpx solid green;} 

</style> 

</head> 

<body> 

<p> 内 部 模式 </p> 

<ul id="inside"> 

<1i> 内 部 模式 inside</1i> 

<1i> 示 例 XHTML 教程 .</1i> 

<1i> 示 例 css 教程 .</1i> 

<1i> 示 例 JAVASCRIPT 教程 .</1i> 

</ul> 

<p> 外 部 模式 </p> 

<ul id="outside"> 

<1i> 外 部 模式 outside</1i> 

<1i> 示 例 XHTML 教程 .</1i> 

<1i> 示 例 css 教程 .</1i> 

<1i> 示 例 JAVASCRIPT 教程 .</1i> 

</ul> 

</body> 

</html> 


3. list-style-type 属性 
list-style-type 属性 : 用 于 设置 或 检索 对 象 的 列表 项 所 使 用 的 预 设 标记 。 其 值 如 下 。 


@ Disc: 点 。 

® Circle: 5 

@ Square: 正方 形 。 
e Decimal: 数字 。 


其 值 


@ None: 无 (取消 所 有 的 list 样式 )。 
示例 代码 如 下 : 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CSS 1ist-style-type 属性 示例 </title> 
<style type="text/css" media="all"> 
ul{list-style-type: disc;} 

</style> 

</head> 

<body> 

<ul> 

<1i> 正 常 模式 </1i> 

<1i> 示 例 XHTML 教程 .</1i> 

<1i> 示 例 css 教程 .</1i> 

<1i> 示 例 JAVASCRIPT 教程 .</1i> 

</ul> 

</body> 

</html> 


11.2.6 ”案例 6 一 一 使 用 区 块 样式 美化 区 块 


块 级 元 素 就 是 一 个 方块 ， 像 段落 一 样 ， 默 认 占 据 一 行 位 置 。 内 联 元 素 又 称 行内 元 素 ， 顾 
名 思 义 ， 它 只 能 放 在 行内 ， 就 像 一 个 单词 一 样 不 会 造成 前 后 换行 ， 起 辅助 作用 。 

一 般 的 块 级 元 素 包 括 段 落 <p>、 标 题 <hl>……- <h2>、 列 表 <ul>…… <ol]> <li>、 表 格 
<table>、 表 单 <form>、DIV<div> 和 BODY<body> 等 元 素 。 

内 联 元 素 包括 表单 元 素 <input>、 超 链接 <a>、 图 像 <img>、<span> 等 。 块 级 元 素 的 显著 特 
点 是 ， 它 总 是 从 一 个 新 行 开 始 显 示 ， 而 且 其 后 的 元 素 也 需 另 起 一 行 显示 。 

下 面 通过 一 个 示例 来 看 一 下 块 元 素 与 内 联 元 素 的 区 别 ， 代 码 如 下 : 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CsS 1ist-style-type 属性 示例 </title> 
<style type="text/css" media="all"> 
ul{list-style-type: disc;} 

img{ width:100px height:70px;} 

</style> 

</head> 

<body> 

<p> 标 签 不 同行 : </p> 
<div><imgsrc="flower.jpg" /></div> 
<div><imgsrc="flower.jpg" /></div> 
<div><imgsrc="flower.jpg" /></div> 
<p> 标 签 同一 行 : </p> 
<span><imgsrc="flower.jpg" /></span> 
<span><imgsrc="flower.jpg" /></span> 
<span><imgsrc="flower.jpg" /></span> 
</body> 

</html> 
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在 上 述 示例 中 ，3 个 div 元 素 各 占 一 行 ， 相 当 于 在 它 之 前 和 之 后 各 插入 了 一 个 换行 ， 而 
内 联 元 素 span 没 对 显示 效果 造成 任何 影响 ， 这 就 是 块 级 元 素 和 内 联 元 素 的 区 别 。 正 因为 有 了 
这 些 元 素 ， 才 使 网 页 变 得 丰富 多 彩 。 

如 果 没 有 CSS 的 作用 ， 块 元 素 会 以 不 断 换行 的 方式 一 直 往 下 排 ， 而 有 了 CSS 以 后 ， 可 
以 改变 这 种 HTML 的 默认 布局 模式 ， 把 块 元 素 放 到 想 要 摆 放 的 位 置 上 ， 而 不 是 每 次 都 另 起 一 
行 。 也 就 是 说 ， 可 以 用 CSS 的 display:inline 属性 将 块 级 元 素 改变 为 内 联 元 素 ， 也 可 以 用 
display:block 属性 将 内 联 元 素 改变 为 块 元 素 。 

上 述 代码 修改 如 下 : 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>Css list-style-type 属性 示例 </title> 

<style type="text/css" media="all"> 

ul{list-style-type: disc;} 

img{ width:100px; height:70px;} 

</style> 

</head> 

<body> 

<p> 标 签 同 一 行 : </p> 

<div style="display:inline"><imgsrc="flower.jpg" /></div> 
<div style="display:inline"><imgsrc="flower.jpg" /></div> 
<div style="display:inline"><imgsrc="flower.jpg" /></div> 
<p> 标 签 不 同行 </p> 

<span style="display:block"><imgsrc="flower.jpg" /></span> 
<span style="display:block"><imgsrc="flower.jpg" /></span> 
<span style="display:block"><imgsrc="flower.jpg" /></span> 
</body> 

</html> 


由 此 可 以 看 出 ，display 属性 改变 了 块 元 素 与 行内 元 素 默 认 的 排列 方式 。 另 外 ， 如 果 
display 属性 值 为 none 的 话 ， 那 么 可 以 使 用 该 元 素 隐 藏 ， 并 且 不 会 占据 空间 。 代 码 如 下 : 


<html> 

<head> 

<title>display 属性 示例 </title> 

<style type=" text/ css"> 

div{width:100px; height:50px; border:lpx solid red} 
</style> 

</head> 

<body> 

<div> 第 一 个 块 元 素 </div> 

<div style="display:none"> 第 二 个 块 元 素 </div> 
<div > 第 三 个 块 元 素 </div> 

</body> 

</html> 


11.2.7 案例 7 一 一 使 用 宽 高 样式 设 定 宽 高 
11.2.6 节 介绍 了 块 元 素 与 行内 元 素 的 区 别 ， 本 节 将 介绍 二 者 宽 高 属性 的 区 别 ， 块 元 素 可 以 
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设置 宽度 与 高 度 ， 但 行内 元 素 是 不 能 设置 的 。 比 如 ，span 元 素 是 行内 元 素 ， 给 span 设置 宽 、 
高 属性 的 代码 如 下 : 


<html> 

<head> 

<title> 宽 高 属性 示例 </title> 

<style type=" text/ css"> 

span{ background:#CCC } 

.special{ width:100px; height:50px; background:#cCCC} 
</style> 

</head> 

<body> 

<span class="special"> 这 是 span 元 素 1</span> 
<span> 这 是 span 元 素 2</span> 

</body> 

</html> 


在 这 个 示例 中 ， 程 序 运行 的 结果 是 ， 设 置 了 宽 高 属性 的 span 元 素 1， 与 没有 设置 宽 高 属 
性 的 span 元 素 2 的 显示 效果 是 一 样 的 。 因 此 ， 行 内 元 素 不 能 设置 宽 高 属性 。 如 果 把 span 元 
素 改 为 块 元 素 ， 效 果 会 如 何 呢 ? 

根据 11.2.6 节 所 学 内 容 ， 通 过 设置 display 属性 的 值 为 block， 可 使 行内 元 素 变 为 块 元 
素 。 代 码 如 下 : 


<html> 

<head> 

<title> 宽 高 属性 示例 </title> 

<style type=" text/ css"> 

span{ background:#cCC;display:block ;border:lpx solid #036} 
.special{ width:200px; height:50px; background:#CCC} 
</style> 

</head> 

<body> 

<span class="special"> 这 是 span 元 素 1</span> 
<span> 这 是 span 元 素 2</span> 

</body> 

</html> 


在 浏览 器 的 输出 中 可 以 看 出 ， 当 把 span 元 素 变 为 块 元 素 后 ， 类 为 special 的 span 元 素 1 
按照 所 设置 的 宽 高 属性 显示 ， 而 span 元 素 2 则 按 默认 状态 占据 一 行 显示 。 


11.2.8 案例 8 一 一 使 用 边框 样式 美化 边框 


border 一 般 用 于 分 隔 不 同 的 元 素 。border 的 属性 主要 有 3 个 ， 即 color( 颜 色 )、width( 粗 
细 )、 style( 样 式 ) 。 在 使 用 CSS 设置 边框 时 ， 可 以 分 别 使 用 border-color、border-width 和 
border-style 属性 进行 设置 。 
@ ”border-color: 用 于 设 定 border 的 颜色 。 通 常情 况 下 ， 颜 色 值 为 十 六 进 制 数 ， 比 如 红 
色 为 #ff0000。 当 然 也 可 以 颜色 的 英语 单词 显示 ， 比 如 red，yellow 等 。 
@ ”border-width: 用 于 设 定 border 的 粗细 程度 ， 可 将 其 设 为 thin、medium、thick 或 者 
有 具体 的 数值 ， 单 位 为 px。border 默认 的 宽度 值 为 medium， 一 般 浏览 器 将 其 解析 
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为 2px。 

@ ”border-style: 用 于 设 定 border 的 样式 ，none( 无 边框 线 )、dotted( 由 点 组 成 的 虚线 )、 
dashed( 由 短线 组 成 的 虚线 )、solid( 实 线 )、double( 双 线 ， 双 线 宽 度 加 上 它们 之 间 的 空 
白 部 分 的 宽度 就 等 于 border-width 定义 的 宽度 )、groove( 根 据 颜色 画 出 3D 沟 槽 状 的 
边框 )、ridge( 根 据 颜色 画 出 3D 将 状 的 边框 )、inset( 根 据 颜色 画 出 3D 内 嵌 边 框 ， 颜 色 
较 深 )、outse(t 根据 颜色 画 出 3D 外 嵌 边 框 ， 颜 色 较 浅 ) 等 样式 。 注 意 : border-style 
属性 的 默认 值 为 none， 因 此 边框 要 想 显示 出 来 必须 设置 border-style 的 值 。 

为 了 更 清楚 地 看 到 这 些 样式 的 效果 ， 下 面 通过 一 个 例子 来 展示 一 下 。 其 代码 如 下 : 


<html> 

<head> 

<title>border 样式 示例 </title> 

<style type=" text/ css"> 

div{ width:300px; height:30px; margin-top:10px; 
border-width:5px;border-color:green } 

</style> 

</head> 

<body> 

<div style="border-style:dashed"> 边 框 为 虚线 </div> 

<div style="border-style:dotted"> 边 框 为 点 线 </div> 

<div style="border-style:double"> 边 框 为 双 线 </div> 

<div style="border-style:groove"> 边 框 为 3D 沟 槽 状 线 </div> 
<div style="border-style:inset"> 边 框 为 3D 内 媒 边 框 线 </div> 
<div style="border-style:outset"> 边 框 为 3D 外 髓 边框 线 </div> 
XHTML+CSS+Javascript 网 页 设计 与 布局 

114 

<div style="border-style:ridge"> 边 框 为 3D 将 状 线 </div> 
<div style="border-style:solid"> 边 框 为 实 线 </div> 
</body> 

</html> 


在 上 述 代 码 中 ， 分 别 设置 了 border-color、border-width 和 border-style 属性 ， 其 效果 是 对 
上 下 左右 4 条 边框 同时 产生 作用 。 在 实际 应 用 中 ， 除 了 采用 这 种 方式 外 ， 还 可 以 分 别 对 4 条 
边框 设置 不 同 的 属性 值 。 其 方法 是 按照 规定 的 顺序 ， 给 出 2 个 、3 个 、4 个 属性 值 ， 分 别 代 
表 不 同 的 含义 。 给 出 2 个 属性 值 ， 前 者 表示 上 下 边框 的 属性 ， 后 者 表示 左右 边框 的 属性 。 给 
出 3 个 属性 值 ， 前 者 表示 上 边框 的 属性 ， 中 间 的 数值 表示 左右 边框 的 属性 ， 后 者 表示 下 边框 
的 属性 。 给 出 4 个 属性 值 ， 依 次 表示 上 、 右 、 下 、 左 边框 的 属性 ， 即 按 顺 时 针 排 序 。 

其 代码 如 下 : 


<html> 

<head> 

<title>border 样式 示例 </title> 

<style type=" text/ css"> 

div{ border-width:5px 8px;border-color:green yellow red; border- 
style:dotted 

dashed solid double } 

</style> 

</head> 

<body> 
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<div> 设 置 边框 </div> 

</body> 

</html> 

在 上 述 代码 中 ,给 div 设置 的 上 下 边框 的 宽度 为 Spx， 左 右边 框 的 宽度 为 8px; 上 边框 的 
颜色 为 绿色 ， 左 右边 框 的 颜色 为 黄色 ， 下 边框 的 颜色 为 红色 ; 从 上 边框 开始 ， 按 照 顺 时 针 方 
向 ，4 条 边框 的 样式 分 别 为 点 线 、 虚 线 、 实 线 和 双 线 。 

如 果 某 元 素 的 4 条 边框 的 设置 都 一 样 ， 其 代码 还 可 以 简写 如 下 : 


border:5px solid red; 


如 果 想 对 某 一 条 边框 单独 设置 ， 比 如 : 


border-left::5px solid red; 


这 样 只 将 左边 框 设 置 为 红色 、 实 线 、 宽 度 为 5px 就 可 以 了 。 至 于 其 他 3 条 边框 的 设置 ， 
与 此 类 似 ， 其 属性 为 ，border-right、border-top、border-bottom， 分 别 用 于 设置 右边 框 、 上 边 
框 、 下 边框 的 样式 。 

如 果 只 想 设置 某 一 条 边框 的 某 一 个 属性 ， 比 如 : 


border-left-color:: red; 


这 样 就 可 以 将 左边 框 的 颜色 设置 为 红色 。 其 他 属性 设置 类 似 ， 在 此 不 再 一 一 举例 。 
11.3 ”使 用 CSS 滤 镜 美化 网 页 


随 着 网 页 设计 技术 的 发 展 ， 人 们 已 经 不 满足 于 单调 地 展示 页 面 布 局 并 显示 文本 ， 而 是 希 
望 在 页 面 中 能 够 加 入 一 些 多 媒体 特效 而 使 页 面 丰富 起 来 。 使 用 滤 镜 能 够 实现 这 些 需求 ， 它 能 
够 产生 各 种 各 样 的 文字 或 图 片 特效 ， 从 而 大 大 地 提高 页 面 的 吸引 力 。 


11.3.1 CSS 滤 镜 概述 


CSS 滤 镜 是 IE 浏览 器 厂商 为 了 增加 浏览 器 功能 和 竞争 力 ， 而 独自 推出 的 一 种 网 页 特效 。 
CSS 滤 镜 不 是 浏览 器 插件 ， 也 不 符合 CSS 标准 。 由 于 正 浏览 器 应 用 比较 广泛 ， 所 以 这 里 有 必 
要 介绍 一 下 。 

从 Intemet Explorer4.0 开始 ， 浏 览 器 便 开 始 支持 多 媒体 滤 镜 特效 ， 允 许 使 用 简单 的 代码 就 
能 对 文本 和 图 片 进行 处 理 。 比 如 模糊 、 彩 色 投 影 ， 火 焰 效 果 ， 图 片 倒 置 ， 色 彩 渐变 ， 风 吹 效 
果 和 光 晕 效果 等 。 当 把 滤 镜 和 渐变 结合 运用 到 网 页 脚本 语言 中 时 ， 就 可 以 建立 一 个 动态 交互 
的 网 页 。 

CSS 的 滤 镜 属性 的 标识 符 是 filter， 语 法 格式 如 下 : 


filter:filtername (Parameters) 


filtername 是 滤 镜 名 称 ， 比 如 Alpha、blur、chroma 和 DropShadow 等 。parameters 指定 了 
滤 镜 中 各 参数 ， 通 过 这 些 参数 可 控制 滤 镜 的 显示 效果 。 表 11-2 列 出 了 常用 的 滤 镜 名 称 。 
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表 11-2 CSS 滤 镜 
滤 镜 名 称 效 果 

Alpha 设置 透明 度 
BlendTrans 实现 图 像 之 间 的 淡 入 和 淡出 的 效果 
Blur 建立 模糊 效果 
Chroma 设置 对 象 中 指定 的 颜色 为 透明 色 
DropShadow 建立 阴影 效果 
FlipH 将 元 素 水 平 翻转 
ElipV 将 元 素 垂直 翻转 
Glow 建立 外 发 光 效果 
Gray 灰 度 显示 图 像 ， 即 显示 为 黑白 图 像 
Invert 图 像 反 相 ， 包 括 色彩 、 饱 和 度 和 亮度 值 ， 类 似 底片 效果 
Light 设置 光源 效果 
Mask 建立 透明 遮 罩 
RevealTrans 建立 切换 效果 
Shadow 建立 另 一 种 阴影 效果 
Wave 波纹 效果 
X-ray 显现 图 片 的 轮廓 ， 类 似 于 XX 光 片 效果 


滤 镜 可 以 分 为 基本 滤 镜 和 高 级 滤 镜 。 基 本 滤 镜 可 以 直接 作用 于 HTML 对 象 上 ， 是 能 立即 
生效 的 滤 镜 。 高 级 滤 镜 是 指 需要 配合 JavaScript 脚本 语言 ， 才 能 产生 变换 效果 的 滤 镜 ， 包 括 
BlendTrans、RevealTrans 和 Light 等 。 


11.3.2 ”案例 9 一 一 Alpha 滤 镜 


Alpha( 通 道 ) 滤 镜 能 实现 针对 图 片 文字 元 素 的 “透明 ”效果 。 这 种 透明 效果 是 通过 “把 一 
个 目标 元 素 和 背景 混合 ”来 实现 的 ， 混 合 程度 可 以 由 用 户 指定 数值 来 控制 。 通 过 指定 坐标 ， 
可 以 指定 点 、 线 和 面 的 透明 度 。 如 果 将 Alpha 滤 镜 与 网 页 脚本 语言 结合 ， 并 适当 地 设置 其 参 
数 ， 就 能 使 图 像 显示 淡 入 淡出 的 效果 。 

Alpha 滤 镜 的 语法 格式 如 下 : 

{filter : Alpha ( enabled=bEnabled, style=iStyle, opacity=iOpacity, 

finishOopacity=iFinishOpacity, 


startx=iPercent, starty=iPercent, finishx=iPercent, 
finishy=iPercent )} 


上 述 语 法 中 ， 各 参数 的 含义 如 表 11-3 所 示 。 
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表 11-3 ”Alpha 滤 镜 的 参数 意 
参 数 说 明 读 
enabled 设置 滤 镜 是 否 激活 站 
设置 透明 渐变 的 样式 ， 也 就 是 渐变 显示 的 形状 ， 取 值 为 03。0 表示 无 渐变 ，1 表 到 
A 示 线形 渐变 ，2 表示 贺 形 渐变 ，3 表示 矩形 渐变 加 
i 设置 透明 度 ， 取 值 范围 是 0~100。0 表示 完全 透明 ，100 表示 完全 不 透明 码 
finishOpacity 设置 结束 时 透明 度 ， 取 值 范围 也 是 0 一 100。 | 
startx 设置 和 明 渐变 开始 点 的 水 平 坐标 ( 即 毕 标 ) 入 
starty 设置 透明 渐变 开始 点 的 垂直 坐标 ( 即 ， 坐标 ) 9 
finishx 设置 透明 渐变 结束 点 的 水 平 坐标 
i 设置 透明 渐变 结束 点 的 垂直 坐标 
为 图 像 添加 Alpha 渡 镜 的 实例 如 下 : E N 
雪村 NN 
<title>Alpha 滤 镜 </title> 
</head> 
<body> 


原始 图 <img src="baimd.jpg" style="width:200px;height:120px;"> 
style=0<img src="baimd.jpg" style="width:200px;height:120px;filter : 
Alpha (opacity=60 ， style=0)" > 
style=2<img src="baimd.jpg" style="width:200px;height:120px;filter : 
Alpha (opacity=60 ， style=2)" > 
style=3 <img src="baimd.jpg" style="width:200px;height:120px;filter : 
Alpha (opacity=60 ， style=3)" > 
</body> 
</html> 


在 正 浏 览 器 中 浏览 效果 如 图 11-1 所 示 ， 可 以 看 到 显示 了 4 张 图 片 ， 其 透明 度 依次 减弱 。 


图 11-1 Alpha 滤 镜 的 应 用 


在 使 用 Alpha 滤 镜 时 要 注意 以 下 两 点 。 

(1) 由 于 Alpha 滤 镜 使 当前 元 素 部 分 透明 ， 该 元 素 下 层 的 内 容 的 颜色 对 整个 效果 起 着 重 
要 决定 作用 ， 因 此 颜色 的 合理 搭配 相当 重要 。 

(2) 透明 度 的 大 小 要 根据 具体 情况 仔细 调整 ， 取 一 个 最 佳 值 。 

Alpha 滤 镜 的 透明 特效 不 但 能 应 用 于 图 片 ， 还 可 以 应 用 于 文字 。 
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<html> 
<head> 
<title>Alpha 滤 镜 </title> 
<style type="text/css"> 
= 
Pi 
color:yellow; 
font-weight:bolder; 
font-size:25pt; 
width:100% 
|, 
-> 
</style> 
</head> 
<body style="background-color:Black"> 
<div > 
<p>Alpha 滤 镜 </p> 
<p style="filter:alpha(opacity=60 ，style=1)"> 透 明 效 果 </p> 
<p style="filter:alpha(opacity=60 ，style=2) "> 透明 效果 </p> 
<p style="filter:alpha(opacity=60 ，style=3) "> 透明 效果 </p> 
</div> 
</body> 
</html> 


在 正中 浏览 效果 如 图 11-2 所 示 ， 可 以 看 到 显 出 现 了 四 个 段落 ， 其 透明 度 依 次 减弱 。 


11-2 ”Alpha 滤 镜 的 应 用 


11.3.3 ”案例 10 一 一 Blur 滤 镜 


Blur( 模 糊 ) 滤 镜 实现 页 面 模糊 效果 ， 即 在 一 个 方向 上 的 运动 模糊 。 如 果 应 用 得 当 ， 就 可 以 
产生 高 速 移动 的 动感 效果 。 
Blur 滤 镜 的 语法 格式 如 下 : 


{filter : Blur ( enabled=bEnabled , add=iadd ，direction=iairection ， 
strength=fstrength )} 


上 述 语法 中 各 参数 的 含义 如 表 11-4 所 示 。 
表 11-4 Blur 滤 镜 参数 


参 数 说 明 
enabled 设置 滤 镜 是 否 激活 
指定 图 片 是 否 改变 成 模糊 效果 。 这 是 个 布尔 参数 ， 有 效 值 为 True 或 False。True 是 默认 
值 ， 表 示 应 用 模糊 效果 ，False 则 表示 不 应 用 


add 


二 


续 表 


设 定 模糊 方向 。 模 糊 的 效果 是 按 顺 时 针 方 向 起 作用 的 ， 取 值 范围 为 0 一 360 度 ，45 度 为 
一 个 间隔 。 有 8 个 方向 值 : 0 表示 零度 ， 代 表 向 上 方向 。45 表示 右上 ，90 表示 向 右 ， 
135 表示 右 下 ，180 表示 向 下 。225 表示 左下 ，270 表示 向 左 ，315 表示 左上 

指定 模糊 半径 大 小 ， 单 位 是 像素 ， 默 认 值 为 5， 取 值 范围 为 自然 数 ， 该 取 值 决定 了 模糊 
效果 的 延伸 范围 


将 图 片 与 文字 应 用 Blur 滤 镜 ， 具 体 的 代码 如 下 : 


<html> 

<head> 

<title> 模 糊 Blur</title> 
<style> 

img{ 


direction 


height:180px; 
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div.div2 { width:400px;filter:blurl(add=true,direction=90,strength=50) } 
</style> 


GG 


</head> 
<body> 
原始 图 <img src="baihua.jpg"> 
add=true<img src="baihua.jpg" 
style="filter:Blur(add=true,direction=225, strength=20)"> 
add=false<img src="baihua.jpg" 
style="filter:Blur (add=false,direction=225, strength=20)"> 
<div class="div2"> 
<p style="font-size: 30pt; font-weight: bold; color:DarkBlue"> 
Blur 滤 镜 </p> 
</div> 
</body> 
</html> 


在 正 浏览 器 中 浏览 效果 如 图 11-3 所 示 ， 可 以 看 到 两 张 模糊 图 片 ， 在 一 定 方向 上 发 生 模 
糊 。 下 方 的 文字 也 发 生 了 模糊 ， 具 有 文字 吹风 的 效果 。 


Blur 滤 镜 


11-3 Blur 滤 镜 的 应 用 


25@ 


四 
全 266 


Dreamweaver 动态 网 站 开发 
案例 课堂 四 一 


11.3.4 ”案例 11 一 一 Chroma 滤 镜 
Chroma( 透 明 色 ) 滤 镜 可 以 设置 HTML 对 象 中 指定 的 颜色 为 透明 色 。 其 语法 格式 如 下 : 


{filter : Chroma (enabled=bEnabled , color=sColor)} 


其 中 ，color 参数 设置 要 变 为 透明 色 的 颜色 。 
下 面 给 出 一 个 应 用 chroma 滤 镜 的 实例 ， 具 体 的 代码 如 下 : 


<html> 
<head> 
<title>Chroma 滤 镜 </title> 
<style> 
<!-- 
div{position:absolute;top:70;letf:40; filter:Chroma (color=blue)} 
p{font-size:30pt; font-weight:bold; color:blue} 
--> 
</style> 
</head> 
<body> 
<p>Chroma 滤 镜 效果 </p> 
<div> 
<p>Chroma 滤 镜 效果 </p> 
</div> 
</body> 
</html> 


在 下 浏览 器 中 浏览 效果 如 图 11-4 所 示 ， 可 以 看 到 第 二 个 段落 ， 某 些 笔画 丢失 。 但 拖 动 
鼠标 选择 过 滤 颜 色 后 的 文字 ， 便 可 以 查看 过 滤 掉 颜色 的 文字 。 
Chroma 滤 镜 一 般 应 用 于 文字 特效 ， 而 且 对 于 有 些 格式 的 图 片 也 是 不 适用 的 。 比 如 ，JPEG 


格式 的 图 片 是 一 种 已 经 减 色 和 压缩 处 理 的 图 片 ， 所 以 将 其 中 的 某 种 颜色 要 设置 为 透明 ， 十 分 
困难 。 


| B\ 网 页 有 计 与 网 站 站 六 ~ OX 
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Chroma 滤 镜 效果 


人 ina 


图 11-4 Chroma 滤 镜 的 应 用 
11.3.5 ”案例 12 一 一 DropShadow 滤 镜 


阴影 效果 在 实际 的 文字 和 图 片 中 非常 实用 ， 正 浏览 器 通过 DropShadow( 下 落 的 阴影 ) 滤 镜 
建立 阴影 效果 ， 使 元 素 内 容 在 页 面 上 产生 投影 ， 从 而 实现 立体 的 效果 。 其 工作 原理 就 是 创建 


于 上 


一 个 偏 移 量 ， 并 定义 一 个 阴影 颜色 ， 使 之 产生 效果 。 
DropShadow 滤 镜 的 语法 格式 如 下 : 


{filter : DropShadow ( enabled=bEnabled , color=sColor , offx=iOffsetx, 
offy=iOffsety, 
positive=bPositive ) } 


上 述 语 法 中 各 参数 的 含义 如 表 11-5 所 示 。 
表 11-5 DropShadow 滤 镜 的 参数 


参 数 说 明 

enabled 设置 滤 镜 是 否 激活 

color 指定 滤 镜 产生 的 阴影 颜色 

offx 指定 阴影 水 平方 向 偏 移 量 ， 默 认 值 为 5px 

offy 指定 阴影 垂直 方向 偏 移 量 ， 默 认 值 为 5px 
指定 阴影 透明 程度 ， 为 布尔 值 。True(1) 表 示 为 任何 的 非 透明 像素 建立 可 见 的 阴影 ; 
False(0) 表 示 为 透明 的 像素 部 分 建立 透明 效果 


下 面 给 出 了 一 个 应 用 Dropshadow 滤 镜 的 实例 ， 具 体 的 代码 如 下 : 


<html> 
<head> 
<title>DropShadow 滤 镜 </title> 
</head> 
<body> 
<table width="90%" height="90%"> 
<tr> 


沼 到 诺 羔 六 上 站 襟 SSO 于 让 一 一 请 遇 沌 弟 菲 梳洗 ， 册 1 小 


positive 


GG 


<td style="filter: DropShadow (color=gray,offx=10,offy=10,positive=1)"> 
<img src="9.jpg" > 
</td> 
</tr> 
<tr> 
<td style="filter: DropShadow (color=gray, offx=5,offy=5.positive=1); 
font-size:20pt; color:DarkBlue"> 
这 是 一 个 阴影 效果 
</td> 
</tr> 
</table> 
</body> 
</html> 


在 正 浏览 器 中 浏览 效果 如 图 11-5 所 示 ， 可 以 看 到 图 片 产生 了 阴影 ， 但 不 明显 。 下 方 文 
字 产 生 的 阴影 效果 明显 。 
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图 11-5 DropShadow 滤 镜 的 应 用 
11.3.6 “案例 13 一 一 FlipH 滤 镜 和 FlipV 滤 镜 


在 CSS 中 ， 通 过 Filp 滤 镜 可 以 实现 HTML 对 象 的 翻转 效果 ， 其 中 FlipH( 水 平 翻转 ) 滤 镜 
用 于 水 平 翻转 对 象 ， 即 将 元 素 对 象 按 水 平方 向 进行 180 度 翻转 。FlipH 滤 镜 可 以 在 CSS 中 直 
接 使 用 ， 使 用 格式 如 下 : 

{Fliter: FlipH (enabled=bEnabled)} 

该 滤 镜 中 只 有 一 个 enabled 参数 ， 表 示 是 否 激活 该 滤 镜 。 

下 面 给 出 一 个 应 用 FlipH 滤 镜 的 实例 ， 具 体 的 代码 如 下 : 


<html > 
<head> 
<title>FlipH 滤 镜 </title> 

<style> 

img{ 

height:120px; 

width:200px; 

;| 

</style> 

</head> 

<body> 
原 图 片 <img src="9.jpg"> 
图 片 水 平 翻转 <img src="9.jpg" style="Filter:FlipH()"> 


</body> 

</html> 

在 正 浏览 器 中 浏览 效果 如 图 11-6 所 示 ， 可 以 看 到 图 片 以 中 心 为 支点 ， 进 行 了 左右 方向 上 的 
翻转 。 
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如 下 : 


11-6 ”FlipH 滤 镜 的 应 用 


FlipV( 垂 直 翻 转 ) 滤 镜 用 来 实现 对 象 的 垂直 翻转 ， 其 中 包括 文字 和 图 像 。 其 语法 格式 


{Fliter: FlipV (enabled=bEnabled)} 


上 述 语法 中 ，enabled 参数 表示 是 否 激活 滤 镜 。 
下 面 给 出 一 个 应 用 FlipV 滤 镜 的 实例 ， 具 体 的 代码 如 下 : 


局 习 关 沐 淖 册 茶 SSO 汝 启 一 并 身 洒 站 六 克 沪 十 洲 间 


A 


<html> 
<head> 
<title>FlipV 滤 镜 </title> 
</head> 
<body> 
<img src="9.jpg"> 原 图 片 
<img src="9.jpg” style="Filter:FlipV() "> 图 片 垂直 翻转 
</body> 
</html> 
在 正 浏 览 器 中 浏览 效果 如 图 11-7 所 示 ， 可 以 看 到 右 方 图 片上 下 发 生 了 翻转 。 


esr ov 男 
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图 11-7 ”FlipV 滤 镜 的 应 用 
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11.3.7 案例 14 一 一 Glow 滤 镜 


文字 或 物体 发 光 的 特性 往往 能 吸引 浏览 者 注意 ，Glow( 光 晕 ) 滤 镜 可 以 使 对 象 的 边缘 产生 
一 种 柔和 的 边框 或 光 晕 ， 并 可 产生 如 火焰 一 样 的 效果 。 
其 语法 格式 如 下 : 


{filter : Glow ( enabled=bEnabled , color=sColor ， strength=iDistance ) } 


其 中 ，color 用 于 设置 边缘 光 晕 颜色 ，strength 用 于 设置 了 党 圈 范 围 ， 取 值 范围 是 
1 一 255， 值 越 大 效果 越 强 。 
下 面 给 出 了 一 个 应 用 Glow 滤 镜 的 实例 ， 具 体 的 代码 如 下 : 


<html> 
<head> 
<title>filter glow</title> 
这 段 文字 不 带 有 光学 
<style> 
< == 
.wenyt{ 
width:100%; 
filter:Glow (color=#9966CC, strength=10)} 


一 -> 
</style> 
</head> 
<body> 
<div class="weny"> 
<p style="font-family: 1 幼 圆 ; font-size: 40pt; font-weight: bolder; 
color: #003366"> 
这 段 文 字 带 有 光泽 
</div> 
</body> 
</html> 


在 下 浏览 器 中 浏览 效果 如 图 11-8 所 示 ， 可 以 看 到 文字 带 有 光 坚 出 现 ， 非 常 漂亮 。 
Glow 滤 镜 作用 于 文字 时 ， 每 个 文字 边缘 都 会 出 现 光 晕 ， 效 果 非 常 强烈 。 而 对 于 图 片 ，Glow 
滤 镜 只 在 其 边缘 加 上 光 晕 。 


国 EN 责 有 寺 生 网 站 十 记 -cx | 名 fiker glow x Em 
文 全 中。 篇 胆 日 得 看 (V) 收 襄 夫 (A】 工具 (帮助 HH) 


这 段 文 宇 不 带 有 光 晕 
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图 11-8 ”Glow 滤 镜 的 应 用 
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11.3.8 ”案例 15 一 一 Gray 滤 镜 


黑白 色 是 一 种 经 典 颜色 ， 使 用 Gray( 灰 色 ) 滤 镜 能 够 轻松 地 将 彩色 图 片 变 为 黑白 图 片 。 
其 语法 格式 如 下 : 

{filter:Gray (enabled=bEnabled)} 

上 述 语 法 中 ，enabled 表示 是 否 激活 ， 可 以 在 页 面 代 码 中 直接 使 用 。 

下 面 给 出 了 一 个 应 用 Gray 滤 镜 的 实例 ， 具 体 的 代码 如 下 


<html> 
<head> 


<title>Gray 滤 镜 </title> 


</head> 
<body> 


/> 灰 度 图 
</body> 
</html> 


在 正 浏 览 器 中 浏览 效果 如 图 11-9 所 示 ， 可 以 看 到 第 二 张 图 片 以 黑白 色 显示 。 


<img src="9.jpg" style="width: 50%;height:50%" /> 原 图 
<img src="9.jpg" style="width: 50%;height:50%; filter: Gray()" 
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11-9 ”Gray 滤 镜 的 应 用 


11.3.9 案例 16 一 一 Invert 滤 镜 


JInvert( 反 色 ) 滤 镜 可 以 把 对 象 的 可 视 化 属性 全 部 翻转 ， 包 括 色彩 、 饱 和 度 和 亮度 值 ， 使 图 
片 产生 一 种 “底片 ”或 负片 的 效果 。 


其 语法 格式 如 下 : 


{filter:Invert (enabled=bEnabled)} 


上 述 语 法 中 ，enabled 参数 用 来 设置 是 否 激活 滤 镜 。 
下 面 给 出 了 一 个 应 用 反 色 滤 镜 的 实例 ， 具 体 的 代码 如 下 
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<htm1> 
<head> 
<title>Invert 滤 镜 </title> 
</head> 
<body> 


<img src="9.jpg" /> 原 图 

<img src="9.jpg" style="width:30%; filter: Invert()"” /> 反 相 图 
</body> 

</html> 


在 正 浏览 器 中 浏览 效果 如 图 11-10 所 示 ， 可 以 看 到 第 二 张 图 片 以 相片 底片 的 颜色 出 现 。 


ED a eames o. ox] Smesa 四 闻 [3 
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图 11-10 Invert 滤 镜 的 应 用 
11.3.10 “案例 17 一 一 Mask 滤 镜 


通过 Mask( 谈 日 ) 滤 镜 可 为 网 页 中 的 元 素 对 象 做 出 一 个 矩形 遮 单 。 遮 单 ， 就 是 使 用 一 个 颜 
色 图 层 将 包含 有 文字 或 图 像 等 对 象 的 区 域 遮盖 ,但 是 文字 或 图 像 部 分 却 是 以 背景 色 显示 出 来 的 。 
Mask 滤 镜 的 语法 格式 如 下 : 


{filter:Mask (enabled=bEnabled , color=sColor)} 


其 中 ， 参 数 color 用 来 设置 Mask 滤 镜 作用 的 颜色 。 
下 面 给 出 了 一 个 应 用 Mask 滤 镜 的 实例 ， 具 体 代码 如 下 : 


<html> 

<head> 

<title>Mask 遮 单 滤 镜 </title> 

<style> 

| 
width:400; 

filter:mask (color:#FF9900); 
font-size:40pt; 
font-weight:bold; 
color:#00CC99; 

} 

</style> 
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</head> 

<body> 

<p> 这 里 有 个 遮 罩 </p> 
</body> 

</html> 


在 正 浏览 器 中 浏览 效果 如 图 11-11 所 示 ， 可 以 看 到 文字 上 面 有 一 个 遮 罩 ， 文 字 颜色 是 背景 
颜色 。 


CD rasasp -cx ET 
XN RR BE RN RT RR 


这 里 有 个 遮 旱 


潭 到 记 亲 淋 卡 养 SSO 于 请 一 一 前 由 州 弟 草 隔 多 _ 几 中 洲 下 


IGG 


11-11 ”Mask 滤 镜 的 应 用 
11.3.11 案例 18 一 一 Shadow 滤 镜 


通过 Shadow( 阴 影 ) 滤 镜 来 给 对 象 添加 阴影 效果 ， 其 实际 效果 看 起 来 好 像 是 对 象 离开 了 页 
面 ， 并 在 页 面 上 显示 出 该 对 象 阴 影 。 阴 影 部 分 的 工作 原理 是 建立 一 个 偏 移 量 ， 并 为 其 加 上 
颜色 。 

Shadow 滤 镜 的 语法 格式 如 下 : 


{filter:Shadow (enabled=bEnabled , color=sColor , direction=iOffset 
strength=iDistance)} 


上 述 语 法 中 的 各 参数 如 表 11-6 所 示 。 
表 11-6 Shadow 滤 镜 的 参数 


参 数 
enabled 


说 明 
设置 滤 镜 是 否 激活 
设置 投影 的 颜色 
设置 投影 的 方向 ， 分 别 有 8 种 取 值 代 表 8 种 方向 : 取 值 为 0 表示 向 上 方向 ，45 为 右 
上 ，90 为 右 ，135 为 右 下 ，180 为 下 方 ，225 为 左下 方 ，270 为 左 方 ，315 为 左上 方 
设置 投影 向 外 扩散 的 距离 


下 面 给 出 了 一 个 应 用 阴影 滤 镜 的 实例 ， 具 体 的 代码 如 下 : 


<html> 

<head> 
<title> 阴 影 效果 </title> 
<style> 

| 


color 


direction 
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Color:#FF6600; 
width:400; 
filter:shadow (color=blue, offx=15, offy=22, positive=flase); 
</style> 
</head> 
<body> 
<h1> 我 好 看 么 </h1> 
</body> 
</html> 


在 正 浏 览 器 中 浏览 效果 如 图 11-12 所 示 ， 可 以 看 到 文字 带 有 阴影 效果 。 
[=Jee 


J [a em 
文件 骨 六 豆 看 (VI 


天 在 扰 骏 上 的 婚 宙 


或 100% ~ 


图 11-12 Shadow 滤 镜 的 应 用 
11.3.12 ”案例 19 一 一 Wave 滤 镜 
Wave( 波 浪 ) 滤 镜 可 以 为 对 象 添加 竖 直 方向 上 的 波浪 效果 ， 也 可 以 用 来 把 对 象 按照 竖 直 的 
波纹 样式 打 乱 。 
其 语法 格式 如 下 : 
{filter:Wave (enabled=bEnabled , add=bAddImage , freq=iWaveCount ， 


lightstrength=iPercentage ， 
phase=iPercentage , strength=iDistance)} 


上 述 语 法 中 的 各 参数 说 明 如 表 11-7 所 示 。 
表 11-7 Wave 滤 镜 的 参数 


参 数 说 明 
enabled 设置 滤 镜 是 否 激活 
add 布尔 值 ， 表 示 是 否 在 原始 对 象 上 显示 效果 。True 表示 显示 ; False 表示 不 显示 
freq 设置 生成 波纹 的 频率 ， 也 就 是 设 定 在 对 象 上 产生 的 完整 的 波纹 的 条 数 


lightStrength | 波纹 效果 的 光照 强度 ， 取 值 范围 为 0 一 100 
设置 正弦 波 开始 的 偏 移 量 ， 取 百分比 值 0 一 100， 默 认 值 为 0.25 表示 360x25% 为 90 


a 度 ，50 则 为 180 度 
strength 波纹 的 曲折 的 强度 


. 
Sx 


下 面 给 出 了 一 个 应 用 Wave 滤 镜 的 实例 ， 具 体 的 代码 如 下 : 


<html> 
<head> 
<title> 波 浪 效果 </title> 
<style> 
a 
color:violet; 
text-align:left; 
width:400; 
filter:wave (add=true, freq=5, lightSstrength=45, phase=20, strength=3) 7 


</style> 

</head> 

<body> 
<h1> 一 起 去 看 大 海 </h1> 
</body> 

</html> 


在 正 浏 览 器 中 浏览 效果 如 图 11-13 所 示 ， 可 以 看 到 文字 带 有 波浪 效果 。 


昼 司 心间 订 此 茶 SSO 洒 记 一 一 并 


图 11-13 ”Wave 滤 镜 的 应 用 


11.3.13 “案例 20 一 一 X-ray 滤 镜 


X-ray(X 射线 ) 滤 镜 可 以 使 对 象 反映 出 它 的 轮廓 ， 并 把 这 些 轮廓 的 颜色 加 亮 ， 使 整体 看 起 
来 会 有 一 种 久光 片 的 效果 。 
其 语法 格式 如 下 : 


{filter:Xxray (enabled=bEnabled)} 


其 中 ，enabled 参数 用 于 确定 是 否 激活 该 滤 镜 。 
下 面 给 出 了 一 个 应 用 X-ray 滤 镜 的 实例 ， 具 体 的 代码 如 下 : 


<html> 

<head> 

<title>x 射线 </title> 
<style> 

.noe { 

filter:xray; 

} 

</style> 

</head> 
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<body> 

<img src="9.jpg" class="noe" /> 
es 

</body> 

</html> 


在 正 浏 览 器 中 浏览 效果 如 图 11-14 所 示 ， 可 以 看 到 图 片 有 XX 光 效 果 。 


图 11-14 X-ray 滤 镜 的 应 用 


11.4 ”实战 演练 一 一 设 定 网 页 中 的 链接 样式 


搜 搜 作 为 一 个 搜索 引擎 网 站 ， 知 名 度 越 来 越 高 了 。 打 开 其 搜 搜 首页 ， 可 看 到 该 页 存在 一 
个 水 平 导 航 菜单 ， 通 过 这 个 导航 可 以 搜索 不 同类 别 的 内 容 。 本 实例 将 结合 本 章 学 习 的 知识 ， 
轻松 实现 搜 搜 导航 栏 的 样式 设 定 。 

有 具体 步骤 如 下 。 

实现 该 实例 ， 需 要 包含 三 个 部 分 ， 第 一 个 部 分 是 SOSO 图 标 ， 第 二 个 部 分 是 水 平 菜单 导 
航 栏 ， 也 是 本 实例 重点 ， 第 三 个 部 分 是 表单 部 分 ， 包 含 一 个 输入 框 和 按钮 。 该 实例 实现 后 ， 
其 实际 效果 如 图 11-15 所 示 。 


11-15 ”预览 网 页 效果 


EDPDp 创建 HIML 网 页 ， 实现 基本 HTML 元 素 。 
对 于 本 实例 ， 需 要 利用 HTML 标记 实现 搜 搜 图 标 ， 导 航 的 项 目 列表 、 下 方 的 搜索 输入 框 
和 按钮 等 。 其 代码 如 下 : 


四 
使 276 


<html> 
<head> 
<title> 搜 搜 </title> 
</head> 
<body> 
<center><br><img src="logo index.png"><br><br><br><br> 
<div> 
<ul> 


<1li id=h></1i> 
<li><a href="#"> 网 页 </a></1i> 
<1i > <a href="#"> 图 片 </a></1i> 
<1i> <a href="#"> 视 频 </a></1i> 
<1i><a href="#"> 音 乐 </a></1i> 
<1i><a href="#"> 搜 吧 </a></1i> 
<1i><a href="#"> 问 问 </a></1i> 
<1i><a href="#"> 团 购 </a></1i> 
<1i><a href="#"> 新 闻 </a></1i> 
<li><a href="#"> 地 图 </a></1i> 
<li id="more"><a href="#"> 更 多 &gt;&gt;</a></1i> 
</ul> 
</div> 
<p style="height:44px;">&nbsp;</p> 
<div id=s> 
<form action="/q?" id="flpage" name="flpage"> 
<input type="text" value="" size=50px;/> 
<input type="submit"” value=" 搜 搜 "> 
</form> 
</div> 
</center> 
</body> 
</html> 


在 下 浏览 器 中 浏览 效果 如 图 11-16 所 示 ， 可 以 看 到 一 个 图 片 ， 即 搜 搜 图 标 ， 中 间 显示 了 
一 列 项 目 列表 ， 每 个 选项 都 是 超级 链接 。 下 方 是 一 个 表单 ， 包 含 输入 框 和 按钮 。 


昼 司 心间 订 此 天 SSO 洒 记 一 一 并 


BN 


SOSO 〇 搜 搜 


扩 虱 更 看 人 


11-16 ”创建 基本 HTML 网 页 


莉 于 BY 添加 CSS 代码 ， 修 饰 项 目 列表 。 
框架 出 来 之 后 ， 就 可 以 修改 项 目 列表 的 相关 样式 ， 即 列表 水 平 显示 ， 同 时 定义 整个 div 
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层 属性 。 比 如 设置 背景 色 、 宽 度 、 底 部 边框 和 字体 大 小 等 。 其 代码 如 下 : 


p{ margin:0px; padding:0px;} 
#div{ 
margin:0px auto; 
font-size:12px; 
padding:0px; 
border-bottom:lpx solid #00c; 
background:#eee; 
width:800px;height:18px; 


div 1if{ 
float:left; 
list-style-type:none; 
margin:0px;padding:0px; 
width:40px; 


上 述 代码 中 ，float 属性 设置 了 菜单 栏 水 平 显 示 ，list-style-type 设置 了 列表 不 显示 项 目 符 
号 。 在 正 浏览 器 中 浏览 效果 如 图 11-17 所 示 ， 可 以 看 到 页 面 整体 效果 和 搜 搜 首页 比较 相似 ， 
下 面 就 可 以 在 细节 上 进一步 修改 了 。 


SO5O 搜 提 


EE 


图 11-17 修饰 基本 HTML 网 页 元 素 
ER 添加 CSS 代码 ， 修 饰 超级 链接 。 代 码 如 下 : 


div 114 af 
display:block; 
text-decoration:underline; 
padding:4px 0px Opx Opx; 
margin:0px; 

font-size:13px; 

» 

div 1i a:link, div li a:visited{ 
color:#004276; 


} 


上 述 代 码 设 置 了 超级 链接 ， 即 导航 栏 中 菜单 选项 中 的 相关 属性 。 比 如 超级 链接 以 块 显 
示 、 文 本 带 有 下 划 线 ， 字 体 大 小 为 13 像素 ， 并 设 定 了 鼠标 访问 超级 链接 后 得 颜色 。 
在 正 浏 览 器 中 浏览 效果 如 图 11-18 所 示 ， 可 以 看 到 字体 颜色 发 生 改 变 ， 字 体 变 小 。 
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11-18 ”修饰 网 页 文字 
EEID) 添加 CSS 代码 ， 定 义 对 齐 方 式 和 表单 样式 。 代 码 如 下 : 


div li#h{width:180px;height:18px;} 
div li#more{width:85px;height:18px;} 
#s{ 
background-color:#006EB8; 
width:430px; 


昼 司 心间 订 此 天 SSO 洒 记 一 一 并 


} 

上 述 代 码 中 ，h 定义 了 水 平 菜 单 最 前 方 空间 的 大 小 ，more 定义 了 更 多 的 长 度 和 宽带 ，s 定 
义 了 表单 背景 色 和 宽带 。 在 正 浏览 器 中 浏览 效果 如 图 11-19 所 示 。 

EERD 添加 CSS 代码， 修饰 访问 默认 相 。 代 码 如 下 : 


<a href="#" style="text-decoration:none;color:#020202;font-size:14px;"> 网 页 
</a> 


此 代码 段 设置 了 被 访问 时 的 默认 样式 。 在 正 浏览 器 中 浏览 效果 如 图 11-20 所 示 ， 可 以 看 
到 “网 页 ”菜单 选项 ， 颜 色 为 黑色 ， 不 带 有 下 划 线 。 


5O5O 搜 要 


团 到 片 所 本 入 报 吧 加 可 和 朵 司 站 于 更 多 党 


图 11-19 修饰 网 页 背景 色 图 11-20 ”网 页 最 终 效果 


11.5 “” 跟 我 练 练 手 


11.5.1 练习 目标 
能 够 熟练 掌握 本 章节 所 讲 内 容 。 
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11.5.2 上 机 练习 


练习 1: 使 用 CSS 样式 表 美化 网 页 。 
练习 2: 使 用 CSS 滤 镜 美化 网 页 。 
练习 3: 设 定 网 页 中 的 链接 样式 。 


11.6 高 手 甜 点 


甜点 1: 滤 镜 效果 是 IE 浏览 器 特有 的 效果 ， 那 么 在 Firefox 中 能 不 能 实现 呢 ? 


滤 镜 效果 虽然 是 正 浏览 器 特有 的 效果 ， 但 使 用 Firefox 浏览 器 时 ， 一 些 属性 也 可 以 实 
现 。 例 如 正 浏览 器 的 阴影 效果 ， 在 Firefox 网 页 设计 中 ， 可 以 先 在 文字 下 面 再 登 一 层 浅 色 的 
同样 的 字 ， 然 后 做 2 个 像素 的 错位 ， 就 可 以 制造 出 有 阴影 的 假象 。 


甜点 2: 文字 和 图 片 导 航速 度 谁 快 呀 ? 
使 用 文字 作 导 航 栏 速度 最 快 。 文 字 导 航 不 仅 速 度 快 ， 而 且 更 稳定 。 比 如 ， 有 些 用 户 上 网 
时 会 关闭 图 片 。 在 处 理 文本 时 ， 不 要 在 普通 文本 上 添加 下 划 线 或 者 颜色 。 除 非特 别 需要 ， 否 


则 不 要 为 普通 文字 添加 下 划 线 。 就 像 用 户 需 要 识别 哪些 能 点 击 一 样 ， 读 者 不 应 当 将 本 不 能 点 
击 的 文字 误 认为 能 够 点 击 。 
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架构 师 的 大 比拼 
一 一 网 页 布局 


定位 ， 最 
些 典型 


一 下 网 页 布局 当中 的 一 
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它 完 全 不 同 于 传统 的 网 页 布局 习惯 。 


使 用 CSS 布局 网 页 是 一 种 很 新 的 概念 ， 
它 首 先 对 页 面 从 整体 上 用 <div> 标 记 进 行 了 分 块 ， 然 后 对 各 个 块 进行 CSS 


后 再 在 各 个 块 中 添加 相应 的 内 容 。 本 章 就 来 介绍 
范例 。 
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12.1 使 用 CSS 排版 


DIV 在 CSS+DIV 页 面 排版 中 是 一 个 块 的 概念 ，DIV 的 起 始 标记 和 结束 标记 之 间 的 所 有 内 
容 都 是 用 来 构成 这 个 块 的 。 其 中 所 包含 的 元 素 特性 由 DIV 标记 属性 来 控制 ， 或 者 通过 使 用 样 
式 表格 式 化 这 个 块 来 进行 控制 。CSS+DIV 页 面 排版 思想 是 ， 先 在 整体 上 进行 <div> 标 记 的 分 
块 ， 然 后 对 各 个 块 进 行 CSS 定位 ， 最 后 再 在 各 个 块 中 添加 相应 的 内 容 。 


12.1.1 案例 1 一 一 将 页 面 用 DIV 分 块 


使 用 DIV+CSS 页 面 排 版 布局 ， 需 要 对 网 页 有 一 个 整体 的 构思 ， 即 准备 将 网 页 划分 为 哪 几 
个 部 分 。 比 如 是 上 、 中 、 下 结构 ， 还 是 左右 两 列 结构 ， 还 是 三 列 结构 。 确 定之 后 ， 根 据 网 页 
构思 ， 将 页 面 用 DIV 划分 为 相应 的 几 个 块 ， 用 来 存放 不 同 的 内 容 。 当 然 了 ， 大 块 中 还 可 以 存 
放 不 同 的 小 块 。 最 后 ， 通 过 CSS 属性 ， 对 这 些 DIV 进行 定位 。 

在 现在 的 网 页 设计 中 ， 一 般 网 站 采用 的 都 是 上 中 下 结构 ， 即 上 面 是 页 面 头 部 ， 中 间 是 页 
面 内 容 ， 最 下 面 是 页 脚 ， 整 个 上 中 下 结构 最 后 放 到 一 个 DIV 容器 中 ， 方 便 控制 。 页 面 头 部 一 
般 用 来 存放 Logo 和 导航 菜单 ， 页 面 内 容 包含 页 面 要 展示 的 信息 、 链 接 和 广告 等 ， 页 脚 存放 的 
是 版 权 信息 和 联系 方式 等 。 

将 上 中 下 结构 放置 到 一 个 DIV 容器 中 ， 方 便 后 面 排版 和 对 页 面 进行 整体 调整 ， 如 图 12-1 
所 示 。 


上 


| 


图 12-1 上 中 下 网 页 布局 结构 
12.1.2 ”案例 2 一 一 设置 各 块 位 置 


复杂 的 网 页 布局 ， 不 是 单纯 的 一 种 结构 ， 而 是 包含 多 种 网 页 结构 。 比 如 总 体 上 是 上 中 
下 ， 中 间 内 部 又 分 为 两 列 布局 等 。 

页 面 总 体 结构 确认 后 ， 一 般 情 况 下 ， 页 头 和 页 脚 的 变化 就 不 会 大 了 。 会 发 生变 化 的 ， 只 
是 页 面 主体 。 此 时 需要 根据 页 面 展示 的 内 容 ， 决 定 中 间 布 局 采用 什么 的 样式 。 


| 


三 一 一 一 = 


图 12-2 上 中 下 网 页 布局 结构 
12.1.3 案例 3 一 一 用 CSS 定位 


页 面 版 式 确定 后 ， 就 可 以 利用 CSS 对 DIV 进行 定位 ， 使 其 在 指定 位 置 出 现 ， 从 而 实现 对 
页 面 的 整体 规划 。 然 后 再 向 各 个 页 面 添加 内 容 。 

下 面 创建 一 个 总 体 为 上 中 下 结构 ， 页 面 主体 布局 为 左右 结构 的 页 面 的 CSS 定位 实例 。 具 
体 步骤 如 下 。 

EC 构建 HIML 网 页 ， 使 用 DIV 划分 最 基本 的 布局 块 。 其 代码 如 下 : 


<html> 
<head> 
<title>Css 排版 </title><body> 
<div id="container"> 
<div id="banner"> 页 面 头 部 </div> 
<div id=content > 
<div id="right"> 
页 面 主体 右 侧 
</div> 
<div id="left"> 
页 面 主体 左 侧 
</div> 
</div> 
<div id="footer"> 页 脚 </div> 
</div> 
</body> 
</html> 


上 述 代 码 中 ， 共 创建 了 5 个 层 。 其 中 ，ID 名 称 为 container 的 DIV 层 ， 是 一 个 布局 容 
器 ， 即 所 有 的 页 面 结构 和 内 容 都 是 在 这 个 容器 内 实现 ; 名 称 为 banner 的 DIV 层 ， 是 页 头 部 
分 ; 名 称 为 footer 的 DIV 层 ， 是 页 脚 部 分 ， 名 称 为 content 的 DIV 层 ， 是 中 间 主 体 (该 层 包含 
了 两 个 层 ， 一 个 是 right 层 ， 一 个 是 left 层 ， 分 别 放置 不 同 的 内 容 )。 

在 正 浏览 器 中 的 浏览 效果 如 图 12-3 所 示 ， 可 以 看 到 网 页 中 显示 了 这 几 个 层 ， 从 上 到 下 
一 次 排列 。 
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12-3 ”添加 网 页 层次 
ED 对 body 标记 和 container 层 ( 布 局 容器 ) 进 行 CSS 修饰 ， 从 而 对 整体 样式 进行 定 
义 。 代 码 如 下 : 


<style type="text/css"> 

a 

body { 
margin:0px; 
font-size:16px; 
font-family:" 幼 圆 "; 

3 

#container{ 
position:relative; 
width:100%; 

} 

一 -> 

</style> 


上 述 代 码 只 是 设置 了 文字 大 小 、 字 体 、 布 局 容器 container 的 宽度 、 层 定位 方式 ， 布 局 容 
器 撑 满 整个 浏览 器 。 

在 正 浏览 器 中 浏览 效果 如 图 12-4 所 示 ， 可 以 看 到 此 时 相 比 较 上 一 个 显示 页 面 ， 发 生 的 
变化 不 大 ， 只 不 过 字形 和 字体 大 小 发 生变 化 ， 因 为 container 没有 带 有 边框 和 背景 色 无 法 显示 


该 层 。 
本 于 BY 使 用 CSS 对 页 头 进行 定位 ， 即 banner 层 ， 使 其 在 网 页 上 显示 。 代 码 如 下 : 
#banner{ 


height:80px; 

border:lpx solid #000000; 
text-align:center; 
background-color:#a2d9ff; 
padding:10px; 
margin-bottom:2px; 


. 

上 述 代码 中 首先 设置 了 banner 层 的 高 度 为 80 像素 ， 宽 度 充满 整个 container 布局 容器 ， 
之 后 又 分 别 设置 了 边框 样式 、 字 体 对 齐 方式 、 背 景色 、 内 边 距 和 外 边 距 的 底部 等 。 

在 正 浏览 器 中 的 浏览 效果 如 图 12-5 所 示 ， 可 以 看 到 在 页 面 顶 部 显示 了 一 个 浅 绿色 的 边 
框 ， 边 框 充满 整个 浏览 器 ， 边 框 中 间 显示 了 一 个 “页 面 头 部 ”的 文本 信息 。 


全 2 


图 12-4 使 用 CSS 设置 网 页 整体 样式 12-5 使 用 CSS 定义 页 头 部 分 


EGR 如 果 在 页 面 主体 两 个 层 并 列 显示 ， 则 需要 使 用 float 属性 ， 将 一 个 层 设置 到 左 
边 ， 将 另 一 个 层 设置 到 右边 。 其 代码 如 下 : 


#right{ 
float:right; 
text-align:center; 
width:80%; 
border:lpx solid #ddeecc; 
margin-left:1px; 
height:200px; 
} 
#1left{ 
float:left; 
width:19%; 
border:lpx solid #000000; 
text-align:center; 
height:200px; 
background-color:#bcbcbc; 
} 


上 述 代码 设置 了 这 两 个 层 的 宽带 ，right 层 占有 空间 的 80%，left 层 占有 空间 的 19%， 并 
分 别 设置 了 两 个 层 的 边框 样式 ， 对 齐 方式 ， 背 景色 等 。 

在 正 浏览 器 中 的 浏览 效果 如 图 12-6 所 示 ， 可 以 看 到 页 面 的 主体 部 分 分 为 两 个 层 并 列 显 
示 ， 左 边 背 景色 为 灰色 ， 占 有 空间 较 小 ， 右 侧 背 景色 为 白色 ， 占 有 空间 较 大 。 


(Dr ex]gcssms | | 


12-6 使 用 CSS 定义 页 面 主体 
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EEJTDp 设置 页 脚 部 分 。 页 脚 通常 在 主体 下 面 。 因 为 页 面 主体 中 使 用 了 float 属性 设置 层 
浮动 ， 所 以 需要 在 页 脚 层 设置 clear 属性 ， 使 其 不 受 浮动 的 影响 。 其 代码 如 下 : 

#footer{ 

clear:both; /* 不 受 float 影响 */ 

text-align:center; 

height:30px; 

border:lpx solid #000000; 

background-color:#ddeecc; 


} 

上 述 代 码 设置 页 脚 对 齐 方式 、 高 度 、 边 框 和 背景 色 等 。 在 正 浏览 器 中 的 浏览 效果 如 
图 12-7 所 示 ， 可 以 看 到 页 面 底部 显示 了 一 个 边框 ， 背 景色 为 浅 绿色 ， 边 框 充满 了 整个 DIV 布 
局 容器 。 


图 12-7 使 用 CSS 定义 页 脚 部 分 


12.2 固定 宽度 网 页 剖析 与 布局 


网 页 开发 过 程 中 ， 有 几 种 比较 经 典 的 网 页 布局 方式 ， 包 括 宽度 固定 的 上 中 下 布局 、 宽 度 
固定 的 左右 布局 、 自 适应 宽度 布局 和 浮动 布局 等 。 这 些 布局 会 经 常 在 网 页 设计 中 出 现 ， 并 且 
经 常 被 用 到 各 种 类 型 的 网 站 开发 中 。 


12.2.1 案例 4 一 一 网 页 单列 布局 模式 


网 页 单列 布局 模式 是 最 简单 的 布局 形式 ， 也 被 称 之 为 1-1-1 型 布局 ， 其 中 “1” 表 示 一 共 
1 列 ， 连 字符 表示 竖 直方 向 上 下 排列 。 如 图 12-8 所 示 为 网 页 单列 布局 模式 示意 图 。 

本 节 将 介绍 的 是 网 页 单列 布局 模式 ， 其 效果 如 图 12-9 所 示 。 

从 中 可 以 看 到 ， 这 个 页 面 一 共 分 为 三 个 部 分 ， 第 一 部 分 包含 图 片 和 菜单 栏 ， 这 一 部 分 放 
到 页 头 ， 是 网 页 单行 布局 版 式 的 第 一 个 “1”。 第 二 个 部 分 是 中 间 的 内 容 部 分 ， 即 页 面 主体 ， 
用 于 存放 要 显示 的 文本 信息 ， 是 网 页 单行 布局 版 式 的 第 二 个 “1”。 第 三 个 部 分 是 页 面 底部 ， 
包含 地 址 和 版 权 信息 的 页 脚 ， 是 网 页 单行 布局 版 式 的 第 三 个 “1” 具 体 步 骤 如 下 。 
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图 12-8 ”网 页 单列 布局 模式 图 12-9 网 页 预览 效果 复 
EEC 使 用 DIV 块 对 页 面 区 域 进行 划分 ， 使 其 符合 1-1-1 的 页 面 布局 模型 。 基 本 代码 二 
如 下 : 多 
<html> NN 
<head> 
<title> 上 中 下 排版 </title> 
</head> 
<body> 


<div class="big"> 
<div class="up"> 
<p><a href="#"> 首 页 </a><a href="#"> 环 保 扫 描 </a><a href="#"> 环 保科 技 
</a><a href="#"> 低 碳 经 济 </a><a href="#"> 土 壤 绿 化 </a></p></div> <div 
class="middle"> 
<br /> 
<h1> 拒 绝 使 用 一 次 性 用 品 </h1> 
<p> 在 现代 社会 生活 中 ， 商 品 的 废弃 和 任意 处 理 是 普遍 的 ， 特 别 是 一 次 性 物品 使 用 激增 。 
据 统 计 ， 英 国人 每 年 抛弃 25 亿 块 尿布 ; ...... 
</p> 
</div> 
<div class="down"> 
<br /> 
<p><a href="#"> 关 于 我 们 </a> | <a href="#"> 免 责 声明 </a> | <a href="#"> 
联系 我 们 </a> | <a href="#"> 生 态 中 国 </a> | <a href="#"> 联 系 我 们 </a></p> 
<p>2011 &copy; 世界 环保 联合 会 郑州 办 事 处 技术 支持 </p> 
</div> 
</div> 
</body> 
</html> 


上 述 代码 创建 了 4 个 层 ， 层 big 是 DIV 布局 容器 ， 用 来 存放 其 他 的 DIV 块 。 层 up 表示 
页 头 部 分 ， 层 middle 表示 页 面 主体 ， 层 down 表示 页 脚 部 分 。 

在 正 浏览 器 中 浏览 效果 如 图 12-10 所 示 ， 可 以 看 到 页 面 显示 了 3 个 区 域 信息 ， 顶 部 显示 
的 是 超级 链接 部 分 ， 中 间 显 示 的 是 段落 信息 ， 底 部 显示 的 地 址 和 版 权 信息 。 其 布局 从 上 到 下 
自动 排列 ， 并 不 是 期 望 的 那 种 。 
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12-10 创建 基本 HTML 网 页 


EEC) 图 12-10 中 的 字体 样式 非常 丑陋 ， 布 局 也 不 合理 。 此 时 需要 使 用 CSS 代码 ， 对 
页 面 整体 样式 ， 进 行 修饰 。 代 码 如 下 : 


<style> 
oil 
padding:0px; 
margin:0px; 
} 
body{ 
3 font-family:" 幼 圆 "; 
\ font-size:12px; 
Ne color:green; 
AN 
.big{ 
width:900px; 
margin:0 auto 0 auto; 
} 
</style> 


上 述 代码 定义 了 页 面 整体 样式 ， 比 如 字形 为 “ 幼 圆 ”， 字 体 大 小 为 12 像素 ， 字 体 颜色 为 
绿色 ， 布 局 容器 big 的 宽带 为 900 像素 。margin:0 auto 0 auto 语句 表示 该 块 与 页 面 的 上 下 边界 
为 0， 左 右 自动 调整 。 

在 正 浏览 器 中 的 浏览 效果 如 图 12-11 所 示 ， 可 以 看 到 页 面 字体 变 小 ， 字 体 颜 色 为 绿色 ， 
并 充满 整个 页 面 ， 页 面 宽度 为 900 像素 。 

[esarsauasp cxleme [CE 
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拒绝 使 用 一 次 性 用 品 


12-11 修饰 网 页 文字 


四 
全 2 


EECSRB9 使 用 CSS 定义 页 头 部 分 ， 即 导航 菜单 。 代 码 如 下 : 


-up p{ 
margin-top:80px; 
text-align:1left; 
position:absolute; 
left:60px; 

七 op:0PK7 
i 

-up at 
display:inline-block; 
width:100px; 
height:20px; 
line-height:20px; 
background-color:#CCCCCC; 
color:#000000; 
text-decoration:none; 
text-align:center; 

} 

-up a:hover{ 
background-color:#FFFFFF; 
color:#FF0000; 

} 


便 壮 牌 奖 名 填 沼 到 一 一 旨 江 


-upt{ 
width:900px; 
height:100px; 
background-image:url (17.jpg); 
background-repeat:no-repeat; 


} 


在 类 选择 器 up 中 ，CSS 定义 层 的 宽度 和 高 度 ， 其 宽度 为 900 像素 ， 并 定义 了 背景 图 片 。 
在 下 浏览 器 中 的 浏览 效果 如 图 12-12 所 示 ， 可 以 看 到 页 面 项 部 显示 了 一 个 背景 图 ， 并且 
超级 链接 以 一 定 距离 显示 ， 以 绝对 定位 方式 在 页 头 显示 。 


(ees pox[ St-  * 国 | 


图 12-12 添加 网 页 背景 色 
EC 使 用 CSS 定义 页 面 主体 ， 即 定义 层 和 段落 信息 。 代 码 如 下 : 


.middle{ 
border:lpx #ddeecc solid; 
margin-top:10px; 


} 


和合 feamweever 动态 网 并 作 
: 一 一 一 一 案例 课堂 >… 


在 类 选择 器 middle 中 ， 定 义 了 边框 的 样式 和 内 边 距 的 距离 ， 此 处 层 的 宽度 和 big 层 宽度 
一 致 。 

在 下 浏览 器 中 的 浏览 效果 如 图 12-13 所 示 ， 可 以 看 到 中 间 部 分 以 边框 形式 显示 ， 标 题 居 
中 显示 ， 段 落 缩 进 两 个 字符 显示 。 


有 011 ®@ 世 乔 环保 联合 会 知州 办 事 处 技术 支持 


图 12-13 使 用 CSS 定义 页 面 主体 
葬 陡 BY 定义 页 脚 ， 代 码 如 下 : 


.down{ 
background-color:#CCCCccc; 
height:80px; 
text-align:center; 


} 
上 述 代 码 中 ， 类 选择 器 down 定义 了 背景 颜色 ， 高 度 和 对 齐 方式 。 其 他 选择 器 定义 超级 链 
接 的 样式 。 
在 正 浏览 器 中 的 浏览 效果 如 图 12-14 所 示 ， 可 以 看 到 页 面 底部 显示 了 一 个 灰色 矩形 框 ， 
其 版 权 信息 和 地 址 信息 居中 显示 。 


12-14 页面 的 最 终 效果 


12.2.2 ”案例 5 一 一 网 页 1-2-1 型 布局 模式 


在 页 面 排版 中 ， 有 时 会 根据 内 容 需 要 将 页 面 主体 分 为 左右 两 个 部 分 显示 ， 用 来 存放 不 同 
的 信息 内 容 ， 实 际 上 这 也 是 一 种 宽度 固定 的 布局 。 这 种 布局 模式 可 以 说 是 1-1-1 型 布局 模式 的 

如 图 12-15 所 示 为 网 页 1-2-1 型 布局 模式 示意 图 。 

本 节 将 介绍 的 是 网 页 1-2-1 型 布局 模式 ， 其 效果 如 图 12-16 所 示 。 


图 12-15 ”1-2-1 网 页 布局 模式 图 12-16 页 面 的 最 终 效果 


ED 创建 HIML 网 页 ， 使 用 DIV 构建 块 。 在 HIML 页 面 ， 将 DIV 框架 和 所 要 显示 
的 内 容 显示 出 来 ， 并 将 要 引用 的 样式 名 称 定 义 好 。 代 码 如 下 : 


<htm1> 
<head> 
<title> 茶 网 </title> 
</head> 
<body> 
<div id="container"> 
<div id="banner"> 
<img src="b.jpg" border="0"> 
</div> 
<div id="links"> 
<ul> 
<1i> 首 页 </1i> 
<1i> 茶 业 动态 </1i> 
<1i> 名 茶 蔡 菜 </1i> 
<1i> 茶 与 文化 </1i> 
<1i> 茶 艺 茶道 </1i> 
<1i> 鉴 茶 品 茶 </1i> 
<1i> 茶 与 健康 </1i> 
<1i> 茶 语 清心 </1i> 
</ul> 
<br> 
</div> 
<div id="leftbar"> 
<p class="lefttitle"> 名 人 与 茶 </p> 


a 
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<p> .三 文 鱼 茶 泡饭 </p> 
<p> . 董 小 宛 的 茶 泡 饭 </p> 
<p>. 人 生 百 味 一 功 茶 </p> 
<p> .我 家 的 茶 事 </p> 
<p class="lefttitle"> 茶 事 掌 故 </p> 
<p>.“ 峨 眉 雪 芽 ”的 由 来 </p> 
<p>. 共 文化 的 养生 术 </p> 
<p>. 老 北京 的 花茶 </p> 
<p> .古代 洗 茶 的 原因 和 来 历 </p> 
</div> 
<div id="content"> 


<h4> 人 生 茶 境 </h4> 
<p> 
eh 清泉 绿茶 ， 用 素雅 的 陶瓷 茶具 ， 同 二 三 人 共 饮 ， 得 半日 之 闲 ， 可 抵 十 年 的 侍 


</p> 


> 
对 中 国人 来 说 ，“ 茶 ”是 一 个 温暖 的 字 。 

</p> 

</div> 

<div id="footer"> 版 权 所 有 2011.08.12</div> 
</div> 
</body> 
</html> 


上 述 代码 定义 的 个 层 用 来 构建 页 面 布局 。 其 中 ， 层 container 作为 布局 容器 ; 层 banner 作 
为 页 面 图 形 logo; 层 links 层 作为 页 面 导 航 ; 层 leftbar 作为 左 侧 内 容 部 分 ; 层 content 作为 右 
侧 内 容 部 分 ， 层 footer 作为 页 脚 部 分 。 

在 正 浏览 器 中 浏览 效果 如 图 12-17 所 示 ， 可 以 看 到 页 面 上 部 显示 了 一 张 图 片 ， 下 面 是 超 
级 链接 ， 段 落 信息 ， 最 后 是 地 址 信息 等 。 

本 于 BY CSS 定义 页 面 整体 样式 ， 比 如 网 页 中 字形 或 对 齐 方式 等 。 代 码 如 下 : 


margin:0px; padding:0px; 
text-align:center; 

} 

#container{ 
position: relative; 
margin: 0 auto; 
padding:0px; 
width:700px; 
text-align: left; 

} 

一 -> 

</style> 


上 述 代码 中 ， 类 选择 器 container 定义 了 布局 容器 的 定位 方式 为 相对 定位 ， 宽 度 为 700 像 
素 ， 文 本 左 对 齐 ， 内 外 边 距 都 为 0 像素 。 

在 正 浏览 器 中 的 浏览 效果 如 图 12-18 所 示 ， 可 以 看 到 与 上 一 个 页 面 比较 ， 发 生 的 变化 
不 大 。 
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图 12-17 添加 网 页 基本 信息 图 12-18 使 用 CSS 定义 页 面 整体 样式 扫 
TB> CSS 定义 页 头 部 分 。 此 网 页 的 页 头 部 分 ， 包 含 两 个 部 分 ， 一 个 页 面 logo， 一 个 ”前 


页 面 的 导航 菜单 。 定 义 这 两 个 层 的 CSS 代码 如 下 : 


#banner{ 
margin:0px; padding:0px; 
} 
#1links{ 
font-size:12px; 
margin:-18px Opx Opx Opx; 
padding:0px; 
position:relative; 


上 述 代 码 中 ，ID 选择 器 banner 定义 了 内 外 边 距 都 是 0 像素 ，ID 选择 器 links 定义 了 导航 
菜单 的 样式 ， 比 如 字体 大 小 为 12 像素 ， 定 位 方式 为 相对 定位 等 。 
在 下 浏览 器 中 浏览 效果 如 图 12-19 所 示 ， 可 以 看 到 页 面 导航 部 分 在 图 像 上 显示 ， 并 且 每 
个 菜单 相隔 一 定 距 离 。 
EEIz 使 用 CSS 代码 ， 定 义 页 面 主体 左 侧 部 分 ， 代 码 如 下 : 
#leftbar{ 
background-color:#d2e7ff; 
text-align:center; 
font-size:12px; 
width:150px; 
float:left; 
padding-top:0px; 
padding-bottom:30px; 
margin:0px; 
上 述 代码 中 ， 选 择 器 leftbar 定义 了 层 背景 色 、 对 齐 方式 、 字 体 大 小 和 左 侧 DIV 层 的 宽 
度 。 这 里 使 用 float 定义 层 在 水 平方 向 上 浮动 定位 。 
在 正 浏览 器 中 的 浏览 效果 如 图 12-20 所 示 ， 可 以 看 到 页 面 左 侧 部 分 以 矩形 框 显 示 ， 包 含 
了 一 些 简单 的 页 面 导 航 。 
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EI 


图 12-19 使 用 CSS 定义 页 头 部 分 图 12-20 使 用 CSS 定义 页 面 主体 的 左 侧 部 分 
EDRD 使 用 CSS 代码 ， 定 义 页 面 主体 右 侧 部 分 ， 代 码 如 下 : 
#content{ 


font-size:12px; 
float:left; 
width:550px; 
padding:5px 0px 30px Opx; 
margin:0px; 
3 
在 上 述 代码 中 ，ID 选择 器 content， 用 来 定义 字体 大 小 、 右 侧 div 层 宽度 ， 内 外 边 距 等 。 
在 正 浏览 器 中 的 浏览 效果 如 图 12-21 所 示 ， 可 以 看 到 右 侧 部 分 的 段落 字体 变 小 ， 段 落 缩 进 了 
两 个 单元 格 。 
EEJep Css 定义 页 脚 部 分 。 如 果 上 面 的 层 使 用 了 浮动 定位 ， 页 脚 一 般 需 要 使 用 clear 去 
掉 浮动 所 带 来 的 影响 。 其 代码 如 下 : 
#footer{ 
clear:both; 
font-size:12px; 
width:100%; 
padding:3px 0px 3px Opx; 
text-align:center; 
margin:0px; 
background-color:#b0cfff; 
在 上 述 代码 中 ，footer 选择 器 定义 了 层 的 宽度 ， 即 充满 整个 布局 容器 ， 字 体 大 小 为 12 像 
素 ， 居 中 对 齐 和 背景 色 。 在 正 浏览 器 中 的 浏览 效果 如 图 12-22 所 示 ， 可 以 看 到 页 脚 显 示 了 一 
个 矩形 框 ， 背 景色 为 浅 蓝 色 ， 和 矩形 框 内 显示 了 版 权 信息 。 
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图 12-21 使 用 CSS 定义 页 面 主体 的 右 侧 部 分 12-22 使 用 CSS 定义 页 脚 部 分 


12.2.3 ”案例 6 一 一 网 页 1-3-1 型 布局 模式 


掌握 了 网 页 1-2-1 型 布局 之 后 ，1-3-1 型 布局 就 很 容易 实现 了 ， 在 1-2-1 布局 中 增加 一 列 就 
可 以 了 ， 框 架 布局 如 图 12-23 所 示 。 
下 面 介绍 制作 网 页 1-3-1 型 布局 模式 ， 最 终 的 效果 如 图 12-24 所 示 。 上 有 具体 操作 步骤 如 下 。 
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图 12-23 ”1-3-1 型 布局 模式 12-24 ”页 面 最 终 效果 


EEJDp 创建 HIML 网 页 ， 使 用 DIV 构建 块 。 在 HTML 页 面 ， 将 DIV 框架 和 所 要 显示 
的 内 容 显示 出 来 ， 并 将 要 引用 的 样式 名 称 定义 好 ， 代 码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/VDTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.oFrgG/1999/Xhtm1ln> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>1-3-1 固定 宽度 布局 float 实例 </title> 
</head> 
<body> 
<div id="header"> 

<div class="rounded"> 

<h2> 页 头 </h2> 
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<div class="main"> 
<p> 
清明 时 节 雨 纷纷 ， 路 上 行人 欲 断 瑰 <br/> 
借 问 酒家 何 处 有 ， 牧 童 遥 指 桂 花村 </p> 
</div> 
<div class="footer"> 
<p></p> 
</div> 
</div> 
</div> 
<div id="container"> 
<div id="left"> 
<div class="rounded"> 


<h2> 正 文 </h2> 
<div class="main"> 
<p> 


清明 时 节 雨 纷纷 ， 路 上 行人 欲 断 瑰 <br/> 
借 问 酒家 何 处 有 ， 牧 童 遥 指 杏 花村 
</p> 


</div> 
<div class="footer"> 


<p> 
查看 详细 信息 &gt; ggt; 
</p> 
</div> 
</div> 
</div> 
<div id="content"> 
<div class="rounded"> 
<h2> 正 文 1</h2> 
<div class="main"> 
<p> 
清明 时 节 雨 纷纷 ， 路 上 行人 欲 断 瑰 <br/> 
借 问 酒家 何 处 有 ， 牧 童 遥 指 杏 花村 


</p> 


</div> 
<div class="footer"> 


<p> 
查看 详细 信息 &gt; &gt; 
</p> 
</div> 
</div> 
</div> 
<div id="side"> 
<div class="rounded"> 
<h2> 正 文 2</h2> 
<div class="main"> 
<p> 
清明 时 节 雨 纷纷 ， 路 上 行人 和 欲 断 瑰 <br/> 
借 问 酒家 何 处 有 ， 牧 童 遥 指 桂花 村 
</p> 
</div> 
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<div class="footer"> 
<p> 
查看 详细 信息 &gt; &gt; 
</p> 
</div> 
</div> 
</div> 
</div> 
<div id="pagefooter"> 
<div class="rounded"> 
<h2> 页 脚 </h2> 
<div class="main"> 


<p> 

清明 时 节 雨 纷纷 ， 路 上 行人 欲 断 魂 
</p> 

</div> 

<div class="footer"> 

<p> 


便 羯 息 奖 多 填 沼 到 一 一 弗 江 


</p> 
</div> 
</div> 
</div> 
</body> 
</html> 


在 正 浏 览 器 中 的 预览 效果 如 图 12-25 所 示 。 


和 
正文 


于 外 中 二 


人 
正文 1 

上 
二 
Efe 
正文 2 


入 到 时 节 而 维 纷 ， 路 上 行人 放电 于 
省 问 本 家 条 外 有 ， 效 音 放 内 吉 花村 


图 12-25 创建 网 页 的 HTML 基本 页 面 


EECSS 定义 页 面 整体 样式 。 网 页 整体 信息 定义 完毕 后 ， 需 要 使 用 CSS 来 定义 网 页 
的 整体 样式 ， 具 体 代码 如 下 : 


<style type="text/css"> 
body { 

background: #FFF; 

三 CE px 宋体 ; 
margin:0; 

padding:0; 
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} 

-rounded { 
background: url (images/left-top.gif) top left no-repeat; 
width:100%; 
} 

.rounded h2 { 
background: 

url (images/right-top.gif) 

top right no-repeat; 
padding:20px 20px 1l0px; 
margin:0; 


} 
.rounded .main { 
background: 
url (images/right .gif) 
top right repeat-y; 
padding:10px 20px; 
margin:-20px 0 0 0; 
} 
.rounded .footer { 
background: 
url (images/left-bottom.gif) 
bottom left no-repeat; 
} 
.rounded .footer P { 
color:red; 
text-align:right; 
background:url (images/right-bottom.gif) bottom right no-repeat; 
display:block; 
padding:10px 20px 20px; 
margin:-20px 0 0 0; 
font:0/0; 
} 
#header, #pagefooter,#container{ 
margin:0 auto; 
width:760px;} 
#1left{ 
float:left; 
width:200px; 
} 


#content{ 
float:left; 
width:300px; 
} 

#sidef{ 
float:left; 
width:260px; 
} 


#pagefooter{ 
clear:both; 


} 
</style> 


在 浏览 器 正 中 的 浏览 效果 如 图 12-26 所 示 。 


宣 鱼 牌 将 加 寸 导 习 一 一 非 焉 


图 12-26 使 用 CSS 定义 网 页 布局 


12.3 ”自动 缩放 网 页 1-2-1 型 布局 模式 


自动 缩放 的 网 页 布局 要 比 固定 宽度 的 网 页 布局 复杂 一 些 ， 其 根本 的 原因 在 于 宽度 不 确 
定 ， 导 致 很 多 参数 无 法 确定 ， 必 须 使 用 一 些 技巧 来 完成 。 

对 于 一 个 1-2-1 型 的 布局 ， 首 先 要 使 内 容 的 整体 宽度 随 浏 览 器 窗口 宽度 的 变化 而 变化 。 
此 ， 中 间 container 容器 中 的 左右 两 列 的 总 宽度 也 会 变化 。 这 样 就 会 产生 两 种 不 同 的 情况 : 一 
是 这 两 列 按照 一 定 的 比例 同时 变化 ; 二 是 一 列 固定 ， 另 一 列 变化 。 这 两 种 情况 都 是 很 常用 的 
布局 方式 ， 下 面 先 从 等 比例 变 宽 布局 讲 起 。 


12.3.1 案例 7 一 一 1-2-1 型 等 比例 变 宽 布局 


首先 实现 按 比例 的 适应 方式 ， 可 以 在 前 面 制作 的 1-2-1 型 浮动 布局 的 基础 上 完成 本 案例 。 
原来 的 1-2-1 型 浮动 布局 中 的 宽度 都 是 用 像素 数值 确定 的 固定 宽度 ， 下 面 就 来 对 它 进行 改造 ， 
使 它 能 够 自动 调整 各 个 模块 的 宽度 。 

实际 上 只 需要 修改 3 处 宽度 就 可 以 了 ， 修 改 的 样式 代码 如 下 : 


#header, #pagefooter,#container{ margin:0 auto7 
width: 768px; /* 删 除 原来 的 固定 宽度 

width: 85%; /* 改 为 比例 宽度 */ 

#content{ float:right; 

width:500px; /* 删 除 原来 的 固定 宽度 */ 

width: 66%; /* 改 为 比例 宽度 */ 

#side{ float:left; 

width: ”260px; /* 删 除 原来 的 固定 宽度 */ 

width:33%; /* 改 为 比例 宽度 */ 


在 正 浏 览 器 中 运行 上 述 程 序 ， 即 可 得 到 如 图 12-27 所 示 的 结果 。 
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图 12-27 ”1-2-1 型 等 比例 变 宽 布局 


在 这 个 页 面 中 ， 网 页 内 容 的 宽度 为 浏览 器 窗口 宽度 的 85%。 页 面 中 左 侧 的 边栏 的 宽度 和 
右 侧 的 内 容 栏 的 宽度 保持 1 : 2 的 比例 。 可 以 看 到 无 论 浏览 器 窗口 宽度 如 何 变 化 ， 它 们 都 等 比 
例 变化 。 这 样 就 实现 了 各 个 div 的 宽度 都 会 等 比例 适应 浏览 器 窗口 。 

在 实际 应 用 中 还 需要 注意 以 下 两 点 。 

(1) 确保 不 要 使 一 列 或 多 个 列 的 宽度 太 大 ， 以 至 于 其 内 部 的 文字 行 宽 太 宽 ， 造 成 阅读 
困难 。 

(2) 圆 角 框 的 最 宽 宽度 的 限制 ， 这 种 方法 制作 的 圆 角 框 如 果 超 过 一 定 宽度 就 会 出 现 
裂缝。 


12.3.2 ”案例 8 一 一 1-2-1 型 单列 变 宽 布局 


在 实际 应 用 中 ， 单 列 宽度 变化 ， 而 保持 其 他 列 固 定 不 变 的 布局 ， 比 其 他 布局 方法 更 实 
用 。 一般 在 存在 多 个 列 的 页 面 中 ， 通 常 比较 宽 的 一 个 列 是 用 来 放置 内 容 的 ， 而 窜 列 放置 链 
接 、 导 航 等 内 容 。 这 些 内 容 一 般 宽 度 是 固定 的 ， 不 需要 扩大 。 因 此 可 以 把 内 容 列 设置 为 可 以 
变化 ， 而 其 他 列 固 定 。 

比如 在 图 12-27 中 ， 右 侧 的 Side 的 宽度 固定 ， 当 总 宽度 变化 时 ，Content 部 分 就 会 自动 变 
化 。 如 果 仍 然 使 用 简单 的 浮动 布局 是 无 法 实现 这 个 效果 的 。 如 果 把 某 一 列 的 宽度 设置 为 固定 
值 ， 那 么 另 一 列 ( 即 活动 列 ) 的 宽度 就 无 法 设置 了 ， 因 为 总 宽度 未 知 ， 活 动 列 的 宽度 也 无 法 确 
定 。 那 么 怎么 解决 呢 ? 主要 问题 就 是 浮动 列 的 宽度 应 该 等 于 100%-300px， 而 CSS 显然 不 支 
持 这 种 带 有 加 减法 运算 的 宽度 表达 方法 ， 但 是 通过 margin 可 以 变通 地 实现 这 个 宽度 。 

具体 的 解决 方法 是 ， 在 content 的 外 面 再 套 一 个 DIV， 使 它 的 宽度 为 100%， 也 就 是 等 于 
container 的 宽度 ， 然 后 通过 将 左 侧 的 margin 设置 为 负 的 300 像素 ， 就 使 它 向 左 平移 了 300 像 
素 。 再 将 content 的 左 侧 margin 设置 为 正 的 300 像素 ， 就 实现 了 100%-300px 这 个 本 来 无 法 表 
达 的 宽度 。 具 体 的 CSS 代码 如 下 : 


#header, #pagefooter,#container{ 
margin:0 auto; 

width:85%; 

min-width:500px; 
max-width:800px; 


} 

#contentWrap{ 
margin-left:-260px; 
float:left; 
width:100%; 

} 

#content{ 
margin-left:260px; 
} 

#side{ 
float:right; 
width:260px; 

} 

#pagefooter{ 
clear:both; 


} 
在 正 浏 览 器 中 运行 上 述 代码 ， 即 可 得 到 如 图 12-28 所 示 的 结果 。 


便 壮 阜 奖 名 填 沼 到 一 一 旨 光 


图 12-28 ”1-2-1 型 单列 变 宽 布 局 


12.4 自动 缩放 网 页 1-3-1 型 布局 模式 


1-3-1 型 布局 可 以 产生 很 多 不 同 的 变化 方式 ， 比 如 三 列 都 按 比 例 来 适应 宽度 ， 一 列 固定 ， 
其 他 两 列 按 比 例 适应 宽度 ， 两 列 固定 ， 其 他 一 列 适 应 宽度 。 

对 于 后 两 种 情况 ， 又 可 以 根据 特殊 的 一 列 与 另外 两 列 的 不 同位 置 ， 产 生出 多 种 变化 。 下 
面 分 别 进行 介绍 。 


12.4.1 案例 9 一 一 1-3-1 型 三 列 宽度 等 比例 布局 


对 于 1-3-1 型 布局 的 第 一 种 情况 ， 即 三 列 按 固 定 比 例 伸缩 适应 总 宽度 ， 和 前 面 介绍 的 1-2-1 
型 的 布局 完全 一 样 ， 只 要 分 配 好 每 一 列 的 百分比 就 可 以 了 。 这 里 就 不 再 袭 述 。 
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12.4.2 ”案例 10 一 一 1-3-1 型 单 侧 列 宽度 固定 的 变 宽 布 局 


对 于 一 列 固定 、 其 他 两 列 按 比例 适应 宽度 布局 的 情况 ， 如 果 这 个 固定 的 列 在 左边 或 右 
边 ， 那 么 只 需要 在 两 个 变 宽 列 的 外 面 套 一 个 DIV， 并 使 这 个 DIV 宽度 是 变 宽 的 它 与 旁边 的 固 
定 宽度 列 构成 了 一 个 单列 固定 的 1-2-1 型 布局 就 可 以 了 。 此 时 使 用 “绝对 定位 ”法 或 者 “改进 
浮动 ”法 进行 布局 ， 然 后 再 将 变 宽 列 中 的 两 个 变 宽 列 按 比 例 并 排 ， 就 很 容易 实现 1-3-1 单 侧 列 
宽度 固定 的 变 宽 布局 了 。 

下 面 使 用 浮动 方法 进行 制作 ， 解 决 的 方法 同 1-2-1 型 单列 固定 一 样 。 这 里 把 浮动 的 两 个 列 
看 成 一 个 列 ， 在 容器 里 面 再 套 一 个 DIV， 即 由 原来 的 一 个 wrap 变 为 两 层 ， 分 别 叫 作 
outerWrap 和 innerWrap。 这 样 ，outerWrap 就 相当 于 上 面 1-2-1 型 方法 中 的 wrap 容器 。 新 增加 
的 innerWrap 是 以 标准 流 方式 存在 的 ， 宽 度 会 自然 伸展 ， 由 于 设置 200 像素 的 左 侧 margin， 
因此 它 的 宽度 就 是 总 宽度 减 去 200 像素 了 。innerWrap 里 面 的 navi 和 content 就 会 都 以 这 个 新 
宽度 为 宽度 基准 。 

具体 的 代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.0org/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 
<html xmlns="http://www.w3.0rg/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>1-3-1 1 固定 宽度 布局 float 实例 </title> 

<style type="text/css"> 

body { 

background: #FFF; 

font: 14px 宋体 ; 

margin:0; 

padding:0; 

} 


.rounded { 
background: url (images/left-top.gif) top left no-repeat; 
width:100%; 
} 

-rounded h2 { 
background:url (images/right-top.gif) top right no-repeat; 
padding:20px 20px 1l10px; 
margin:0; 


} 
.rounded .main { 
background: url (images/right.gif) top right repeat-y; 
padding:10px 20px; 
margin:-20px 0 0 0; 
} 
-rounded .footer { 
background: 
url (images/left-bottom.gif) 
bottom left no-repeat; 
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} 
-rounded .footer p { 
color:red; 
text-align:right; 
background:url (images/right-bottom.gif) bottom right no-repeat; 
display:block; 
padding:10px 20px 20px; 


margin:-20px 0 0 0; 比 
font:0/0; 拼 
} 

#header, #pagefooter,#container{ 网 
margin:0 auto; 页 
width:85%; 布 

1 局 

典 

#outerWrap1{ 雪 

float:left; 例 
width:100%; 


margin-left:-200px; 
} 


#innerWrap{ 
margin-left:200px; 
} 


#1left{ 
float:left; 
width:40%; 
} 


#content{ 
float:right; 
width:59.5%; 


#content img{ 
float:right; 
} 


#sidef 
float:right; 
width:200px; 
} 


#pagefooter{ 
clear:both; 
</style> 
</head> 
<body> 
<div id="header"> 
<div class="rounded"> 
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<h2> 页 头 </h2> 
<div class="main"> 


<p> 
床 前 明月 光 ， 疑 是 地 上 和 霜 </p> 


</div> 
<div class="footer"> 
<p></p> 
</div> 
</div> 
</div> 
<div id="container"> 


outerWrap"> 
innerWrap"> 
BEE > 
<div class="rounded"> 
<h2> 正 文 </h2> 
<div class="main"> 
<p> 
床 前 明月 光 ， 疑 是 地 上 和 霜 <br/> 
床 前 明月 光 ， 疑 是 地 上 箱 </p> 


</div> 
<div class="footer"> 


<p> 
查看 详细 信息 &gt; &gt; 
</p> 
</div> 
</div> 
</div> 
<div id="content"> 
<div class="rounded"> 
<h2> 正 文 1</h2> 
<div class="main"> 


<p> 
床 前 明月 光 ， 疑 是 地 上 霜 </p> 


</div> 
<div class="footer"> 
<p> 
查看 详细 信息 &gt; ggt; 
</p> 
</div> 
</div> 
</div> 
</div> 
</div> 
<div id="side"> 
<div class="rounded"> 
<h2> 正 文 2</h2> 
<div class="main"> 
<p> 
床 前 明月 光 ， 疑 是 地 上 霜 <br/> 
床 前 明月 光 ， 疑 是 地 上 和 霜 </p> 


</div> 


<div class="footer"> 


<p> 
查看 详细 信息 &gt; &gt; 
</p> 
</div> 
</div> 
</div> 
</div> 


<div id="pagefooter"> 
<div class="rounded"> 
<h2> 页 脚 </h2> 
<div class="main"> 


<p> 
床 前 明月 光 ， 疑 是 地 上 霜 
</p> 
</div> 
<div class="footer"> 
<p> 
</p> 
</div> 

</div> 

</div> 

</body> 

</html> 


在 正 浏览 器 中 的 运行 结果 如 图 12-29 所 示 。 


便 壮 息 奖 久 填 沼 避 一 一 旨 光 
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图 12-29 1-3-1 型 单 侧 列 宽度 固定 的 变 宽 布 局 
12.4.3 ”案例 11 一 一 1-3-1 型 中 间 列 宽度 固定 的 变 宽 布局 


这 种 布局 是 固定 列 被 放 在 中 间 ， 它 的 左右 各 有 一 列 ， 并 按 比 例 适 应 总 宽度 。 这 是 一 种 很 
少见 的 布局 形式 (最 常见 的 是 两 侧 的 列 宽度 固定 ， 中 间 列 宽度 变化 )， 如 果 已 经 充分 理解 了 “ 改 
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动 ”法 制作 单列 宽度 固定 的 1-2-1 型 布局 ， 那 么 把 “ 负 margin” 的 思路 继续 深化 ， 就 可 以 
实现 这 种 不 多 见 的 布局 。 代 码 如 下 : 


<!IDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 
<html xmlns="http://www.w3.0rg/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>1-3-1 1 中 间 固 定 宽度 布局 float 实例 </title> 

<style type="text/css"> 

body { 

background: #FFF; 

font: 14px 宋体 ; 

margin:0; 

padding:0; 

3 


.rounded { 
background: url (images/left-top.gif) top left no-repeat; 
width:100%; 
} 

-rounded h2 { 
background: url (images/right-top.gif) top right no-repeat; 
padding:20px 20px 1l0px; 
margin:0; 


} 
.rounded .main { 
background: url (images/right .gif) top right repeat-y; 
padding:10px 20px; 
margin:-20px 0 0 0; 
} 
.rounded .footer { 
background: url (images/left-bottom.gif) bottom left no-repeat; 
1 
.rounded .footer p { 
color:red; 
text-align:right; 
background:url (images/right-bottom.gif) bottom right no-repeat; 
display:block; 
padding:10px 20px 20px; 
margin:-20px 0 0 0; 
font:0/0; 
} 
#header, #pagefooter,#container{ 
margin:0 auto; 
width:85%; 
} 


#naviWrap{ 
width:50%; 
float:left; 


margin-left:-150px; 
a 


#1left{ 
margin-left:150px; 
} 


闺 区 


#content{ 
float:left; 
width:300px; 
和 


#content imgf 
float:right; 
} 
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#sideWrap{ 
width:49.9%; 
float:right; 
margin-right:-150px; 


#side{ 
margin-right:150px; 
} 


#pagefooter{ 
clear:both; 
} 


</style> 
</head> 
<body> 
<div id="header"> 
<div class="rounded"> 
<h2> 页 头 </h2> 
<div class="main"> 
<p> 
床 前 明月 光 ， 疑 是 地 上 霜 </p> 
</div> 
<div class="footer"> 
<p></p> 
</div> 
</div> 
</div> 
<div id="container"> 
<div id="naviWrap"> 
<div 1d="Left”"> 
<div class="rounded"> 
<h2> 正 文 </h2> 
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<div class="main"> 
<p> 


床 前 明月 光 ， 疑 是 地 上 和 霜 </p> 


</div> 
<div class="footer"> 
<p> 
查看 详细 信息 &gt; &gt; 
</p> 
</div> 
</div> 
</div> 
</div> 
<div id="content"> 
<div class="rounded"> 
<h2> 正 文 1</h2> 
<div class="main"> 
<p> 


| 床 前 明月 光 ， 疑 是 地 上 霜 </p> 


</div> 
<div class="footer"> 
<p> 
查看 详细 信息 &gt; ggt; 
</p> 
</div> 
</div> 

</div> 

<div id="sideWrap"> 

<div id="side"> 


<div class="rounded"> 
<h2> 正 文 2</h2> 
<div class="main"> 
<p> 
床 前 明月 光 ， 疑 是 地 上 和 霜 
</p> 
</div> 
<div class="footer"> 


<p> 
查看 详细 信息 &gt; &gt; 
AD 
</div> 
</div> 
</div> 
</div> 
</div> 
<div id="pagefooter"> 
<div class="rounded"> 
<h2> 页 脚 </h2> 
<div class="main"> 
<p> 


床 前 明月 光 ， 疑 是 地 上 霜 


</p> 
</div> 
<div class="footer"> 
<p> 
</p> 
</div> 
</div> 

</div> 

</body> 

</html> 


在 上 述 代码 中 ， 页 面 中 间 列 的 宽度 是 300 像素 ， 两 边 列 等 宽 (不 等 宽 的 道理 是 一 样 的 )， 即 
总 宽度 减 去 300 像素 后 剩余 宽度 的 50%， 制 作 的 关键 是 如 何 实现 (100%-300px)/2 的 宽度 。 现 
在 需要 在 left 和 side 两 个 DIV 外 面 分 别 套 一 层 DIV， 把 它们 “ 包 里 ”起 来 ， 依 靠 嵌 套 的 两 个 
DIV， 实 现 相对 宽度 和 绝对 宽度 的 结合 。 在 正 浏览 器 中 的 运行 结果 如 图 12-30 所 示 。 
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图 12-30 1-3-1 型 中 间 列 宽度 固定 的 变 宽 布局 
12.4.4 ”案例 12 一 一 1-3-1 型 双 侧 列 宽度 固定 的 变 宽 布 局 


3 列 中 的 左右 两 列 宽度 固定 ， 中 间 列 宽度 自 适 应 变 宽 布局 实际 应 用 很 广泛 ， 下 面 继续 通过 
浮动 定位 实现 这 种 布局 。 关 键 思想 是 把 3 列 的 布局 看 作 是 嵌 套 的 两 列 布局 ， 利 用 margin 的 负 
值 来 实现 3 列 浮动 。 

具体 的 代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.o0rg/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>1-3-1 1 两 侧 固 定 宽度 中 间 变 宽 布 局 f1oat 实例 </title> 

<style type="text/css"> 

body { 
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background: #FFF; 
fonts 14px 宋体 ; 
margin:07 
padding:0; 

3 


.rounded { 
background: url (images/left-top.gif) top left no-repeat; 
width:100%; 

.rounded h2 { 
background: url (images/right-top.gif) top right no-repeat; 
padding:20px 20px 1l0px; 
margin:07 


} 
.rounded .main { 
background: url (images/right .gif) top right repeat-y; 
padding:10px 20px; 
margin:-20px 0 0 0; 
} 
.rounded .footer { 
background: url (images/left-bottom.gif) bottom left no-repeat; 
} 
.rounded .footer pi{ 
color:red; 
text-align:right; 
background:url (images/right-bottom.gif) bottom right no-repeat; 
display:block; 
padding:10px 20px 20px; 
margin:-20px 0 0 0; 
font:0/0; 
} 
#header, #pagefooter,#container{ 
margin:0 auto; 
width:85%; 
} 
#sidef{ 
width:200px; 
float:right; 
} 
#outerWrap{ 
width:100%; 
float:left; 
margin-left:-200px; 


F 

#innerWrap{ 
margin-left:200px; 
} 


#1left{ 
width:150px; 


float:left; 


#contentWrap{ 
width:100%; 
float:right; 
margin-right:-150px; 


. 

#content{ 
margin-right:150px; 
1 
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#content img{ 
float:right; 
} 
#pagefooter{ 
clear:both; 
} 
</style> 
</head> 
<body> 
<div id="header"> 
<div class="rounded"> 
<h2> 页 头 </h2> 
<div class="main"> 


莱 粮 滋 奖 名 许 河 司 


<p> 
床 前 明月 光 ， 疑 是 地 上 箱 </p> 
</div> 
<div class="footer"> 
<p></p> 
</div> 
</div> 
</div> 
<div id="container"> 
<div id="outerWrap"> 
<div id="innerWrap"> 
<div id="left"> 
<div class="rounded"> 
<h2> 正 文 </h2> 
<div class="main"> 


<p> 床 前 明月 光 ， 疑 是 地 上 霜 </p> 


</div> 
<div class="footer"> 
<p> 
查看 详细 信息 &gt; ggt; 
</p> 
</div> 
</div> 
</div> 
<div id="contentWrap"> 
<div id="content"> 
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<div class="rounded"> 
<h2> 正 文 1</h2> 
<div class="main"> 
<p> 


床 前 明月 光 ， 疑 是 地 上 和 霜 </p> 


</div> 
<div class="footer"> 
<p> 
查看 详细 信息 &gt 7?&gt; 
</p> 
</div> 
</div> 
</div> 
</div><!-- end of contetnwrap--> 


</div><!-- end of inwrap--> 
</div><!-- end of outwrap--> 
<div id="side”"> 
<div class="rounded"> 
<h2> 正 文 2</h2> 
<div class="main"> 
<p> 床 前 明月 光 ， 疑 是 地 上 和 霜 </p> 
</div> 
<div class="footer"> 
<p> 
查看 详细 信息 &gt; &gt; 
二 JE 
</div> 
</div> 
</div> 
</div> 
<div id="pagefooter"> 
<div class="rounded"> 
<h2> 页 脚 </h2> 
<div class="main"> 
<p> 
床 前 明月 光 ， 疑 是 地 上 霜 
</p> 
</div> 
<div class="footer"> 
<p> 
</p> 
</div> 
</div> 
</div> 
</body> 
</html> 


在 上 述 代码 中 ， 先 把 左边 和 中 间 两 列 看 作 一 组 活动 列 ， 而 右边 的 一 列 作为 固定 列 ， 使 用 
前 面 的 “改进 浮动 ”法 就 可 以 实现 。 然 后 ， 再 把 两 列 各 自 当 作 独 立 的 列 ， 左 侧 列 为 固定 列 ， 
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再 次 使 用 “改进 浮动 ”法 ， 就 可 以 最 终 完 成 整个 布局 。 在 正 浏览 器 中 的 运行 结果 如 图 12-31 
所 示 。 


便 羯 阜 奖 子 填 沼 避 一 一 旨 江 


图 12-31 1-3-1 型 双 侧 列 宽度 固定 的 变 宽 布 局 


12.4.5 ”案例 13 一 一 1-3-1 型 中 列 和 侧 列 宽度 固定 的 变 宽 布局 


这 种 布局 的 中 间 列 和 它 一 侧 的 列 是 固定 宽度 ， 另 一 侧 列 宽度 自动 调整 。 很 显然 这 种 布局 
就 很 简单 ， 同 样 可 使 用 改进 浮动 法 来 实现 。 由 于 两 个 固定 宽度 列 是 相 邻 的 ， 因 此 就 不 必 使 用 
两 次 改进 浮动 法 了 ， 只 需要 一 次 就 可 以 做 到 。 具 体 代 码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.0org/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 
<html xmlns="http://www.w3.o0rg/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>1-3-1 中 列 和 左 侧 列 宽度 固定 的 变 宽 布 局 float 实例 </title> 

<style type="text/css"> 

body { 

background: #FFF; 

font: 14px 宋体 ; 

margin:07 

padding:0; 

} 


.rounded { 
background: url (images/left-top.gif) top left no-repeat; 
width:100%; 
} 

.rounded h2 { 
background: url (images/right-top.gif) top right no-repeat; 
padding:20px 20px 10px; 
margin:0; 


} 


.rounded .main { 
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background: 
url (images/right .gif) 
top right repeat-y; 
padding:10px 20px; 
margin:-20px 0 0 0; 
} 
.rounded .footer { 
background: url (images/left-bottom.gif) bottom left no-repeat; 
} 
-rounded .footer p { 
color:red; 
text-align:right; 
background:url (images/right-bottom.gif) bottom right no-repeat; 
display:block; 
padding:10px 20px 20px; 
margin:-20px 0 0 0; 
font:0/0; 
} 
#header, #pagefooter,#container{ 
margin:0 auto; 
width:85%; 
} 


\ #1left{ 
float:left; 
width:150px; 
} 


#content{ 
float:left; 
width:250px; 
} 


#content img{ 
float:right; 
» 


#sideWrap{ 
float:right; 
width:100%; 
margin-right:-400px; 
} 


#sidef{ 
margin-right:400px; 
} 


#pagefooter{ 
clear:both; 

} 

</style> 

</head> 

<body> 


<div id="header"> 
<div class="rounded"> 
<h2> 页 头 </h2> 
<div class="main"> 


<p> 
床 前 明月 光 ， 疑 是 地 上 和 霜 </p> 


</div> i 
<div class="footer"> 比 
<p></p> 拼 
</div> 
</div> 网 
</div> 页 
<div id="container"> 布 
<div id="left"> 局 
<div class="rounded"> 扫 
<h2> 正 文 </h2> 案 
<div class="main"> 例 
<p> 


床 前 明月 光 ， 疑 是 地 上 箱 </p> 


</div> 
<div class="footer"> 


<p> 
查看 详细 信息 &gt; &gt; 
</p> 
</div> 
</div> 
</div> 
<div id="content"> 
<div class="rounded"> 
<h2> 正 文 1</h2> 
<div class="main"> 


<p> 
床 前 明月 光 ， 疑 是 地 上 和 霜 </p> 


</div> 
<div class="footer"> 


<p> 
查看 详细 信息 &gt; ggt; 
</p> 
</div> 
</div> 
</div> 
<div id="sideWrap"> 
<div id="side"> 
<div class="rounded"> 
<h2> 正 文 2</h2> 
<div class="main"> 
<p> 
床 前 明月 光 ， 疑 是 地 上 和 霜 </p> 
</div> 
<div class="footer"> 


<p> 
查看 详细 信息 &gt; &gt; 
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</p> 
</div> 
</div> 
</div> 
</div> 
</div> 
<div id="pagefooter"> 
<div class="rounded"> 
<h2> 页 脚 </h2> 
<div class="main"> 


<p> 
床 前 明月 光 ， 疑 是 地 上 霜 
</p> 
</div> 
<div class="footer"> 
<p> 
</p> 
</div> 
</div> 
</div> 
</body> 
</html> 


2 在 上 述 代码 中 将 左 侧 的 left 和 content 列 的 宽度 分 别 固定 为 150 像素 和 250 像素 ， 右 侧 的 
SN side 列 的 宽度 就 等 于 100%-150px-250px。 因 此 根据 改进 浮动 法 ， 在 side 列 的 外 面 再 套 一 个 
sideWrap 列 ， 使 sideWrap 的 宽度 为 100%， 并 通过 设置 负 的 margin， 使 它 向 右 平移 400 像 
素 。 然 后 再 对 side 列 设置 正 的 margin， 限 制 右边 界 ， 这 样 就 可 以 实现 希望 的 效果 了 。 
在 正 浏 览 器 中 的 运行 结果 如 图 12-32 所 示 。 
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图 12-32 ”1-3-1 型 中 列 与 侧 列 宽度 固定 的 变 宽 布局 
12.5 ”实战 演练 一 一 使 用 CSS 设 定 网 页 布局 列 的 背景 


在 实际 的 页 面 布局 当中 ， 对 各 列 的 背景 色 都 有 要 求 ， 比 如 希望 每 一 列 都 有 自己 的 颜色 。 
下 面 将 以 实例 介绍 如 何 使 用 CSS 设 定 网 页 布局 列 的 背景 色 。 
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这 里 以 固定 宽度 1-3-1 型 布局 为 框架 ， 直 接 修改 其 CSS 样式 表 ， 具 体 代码 如 下 : 


body{ 

font:14px 宋体 ; 
margin:0; 

} 

#header, #pagefooter { 
background:#CF0; 
width:760px; 
margin:0 auto; 

} 

h2{ 

margin:0; 
padding:20px; 

站 

pt{ 

padding:20px; 
text-indent :2em; 


便 闹 稍 奖 迎 训 六 到 一 蒜 江 站 导 守 圭 酒仙 引 涛 车 


margin:0; 

; 

#container { 
position: relative; 
width:760px; 
margin:0 auto; 
background:url (images/16-7.gif); 
#1left { 

width: 200px; 
position: absolute; 
left: Opx; 

top: Opx; 

3 

#content { 

right: Opx; 

top: Opx; 
margin-right: 200px; 
margin-left: 200px; 
} 

#side { 

width: 200px; 
position: absolute; 
right: Opx; 

top: Opx; 


在 上 述 代码 中 ，left、content、side 没有 使 用 背景 色 ， 是 因为 各 列 的 背景 色 只 能 覆盖 到 其 
内 容 的 下 端 ， 而 不 能 使 每 一 列 的 背景 色 都 一 直 扩 展 到 最 下 端 ， 因 为 每 个 DIV 只 负责 自己 的 高 
度 ， 根 本 不 管 它 旁 边 的 列 有 多 高 ， 要 使 并 列 的 各 列 的 高 度 相同 是 很 困难 的 。 


GG 
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通过 给 container 设 定 一 个 宽度 为 760px 的 背景 ， 这 个 背景 图 按 样式 中 的 left、content 
side 宽度 进行 颜色 制作 ， 变 相 实现 给 三 列 加 背景 的 功能 。 运 行 结 果 如 图 12-33 所 示 。 


ET 


ic 


库 刘 有 月 光 ， 疆 地 上 看 
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图 12-33 设 定 网 页 布局 列 的 背景 色 


12.6” 跟 我 练 练 手 
12.6.1 练习 目标 


能 够 熟练 掌握 本 章节 所 讲 内 容 。 
12.6.2 上 机 练习 


练习 1: 使 用 CSS 排版。 

练习 2: 固定 宽度 网 页 剖析 与 布局 。 

练习 3: 自动 缩放 网 页 1-2-1 型 布局 模式 。 
练习 4: 自动 缩放 网 页 1-3-1 型 布局 模式 。 


12.7 高 手 甜 点 


甜点 1: IE 浏览 器 和 Firefox 浏览 器 ， 显 示 float 浮动 布局 时 会 出 现 不 同 的 效果 ， 为 什 
么 ? 


两 个 相连 的 IDV 块 ， 如 果 一 个 设置 为 左 浮动 ， 一 个 设置 为 右 浮动 ， 这 时 在 Firefox 浏览 器 
中 就 会 出 现 设置 失效 的 问题 。 其 原因 是 正 浏览 器 会 根据 设置 来 判断 float 浮动 ， 而 在 Firefox 


浏览 器 中 ， 如 果 上 一 个 float 没有 被 清除 的 话 ， 下 一 个 float 会 自动 沿用 上 一 个 float 的 设置 ， 
而 不 使 用 自己 的 float 设置 。 


这 个 问题 的 解决 办 法 就 是 ， 在 每 一 个 DIV 块 设置 foat 后 ， 在 最 后 加 入 一 句 清除 浮动 的 代 
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码 clear:both。 这 样 就 清除 了 前 一 个 浮动 的 设置 ， 下 一 个 float 就 不 会 再 使 用 上 一 个 浮动 设置 
从 而 使 用 自己 所 设置 的 浮动 了 。 


甜点 2: DIV 层 的 高 度 是 设置 了 好 ， 还 是 不 设置 好 ? 


在 正 浏览 器 中 ， 如 果 设 置 了 DIV 层 的 高 度 值 ， 那 么 一 旦 内 容 很 多 就 会 超出 所 设置 的 高 
度 ， 这 时 浏览 器 就 会 自己 撑 开 高 度 ， 以 达到 显示 全 部 内 容 的 效果 ， 不 受 所 设置 的 高 度 值 限 
制 。 浏 览 器 在 Firefox 浏览 器 中 ， 如 果 固定 了 DIV 层 高 度 值 ， 那 么 容器 的 高 度 就 会 被 固定 住 
就 算 内 容 过 多 ， 浏 览 器 也 不 会 撑 开 ， 也 会 显示 全 部 内 容 ， 但 是 如 果 容 器 下 面 还 有 内 容 的 话 ， 
那么 这 一 块 就 会 与 下 一 块 内 容重 合 。 

解决 这 个 问题 的 办 法 是 ， 不 要 设置 DIV 层 的 高 度 值 ， 让 浏览 器 根据 内 容 多 少 自动 进行 判 
断 ， 这 样 也 就 不 会 出 现 内 容重 合 的 问题 。 
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需要 将 站 点 上 传 到 远 端 服务 器 上 ， 供 Internet 


将 本 地 站 点 中 的 网 站 建设 好 后 ， 


上 的 用 户 浏览 。 


本 章 就 来 介绍 一 下 如 何 发 布 网 站 。 
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13.1 上 传 网 站 前 的 准备 工作 


在 将 网 站 上 传 到 网 络 服务 器 之 前 ， 首 先 要 在 网 络 服务 器 上 注册 域名 和 申请 网 络 空间 ， 同 
时 ， 还 要 对 本 地 计算 机 进行 相应 的 配置 ， 以 完成 网 站 的 上 传 。 


13.1.1 注册 域名 


域名 可 以 说 是 企业 的 “网 上 商标 ”， 所 以 在 域名 的 选择 上 要 与 注册 商标 相符 合 ， 以 便于 
记忆 。 

在 申请 域名 时 ， 应 该 选择 短 且 容易 记忆 的 域名 ， 另 外 最 好 还 要 和 客户 的 商业 有 直接 的 关 
系 ， 尽 可 能 地 使 用 客户 的 商标 或 企业 名 称 。 


13.1.2 ”申请 空间 


域名 注册 成 功 后 ， 需 要 为 自己 的 网 站 在 网 上 安 个 “家 ”， 即 申请 网 站 空间 。 网 站 空间 是 
指 用 于 存放 网 页 的 ， 置 于 服务 器 中 的 可 通过 国际 互联 网 访问 的 硬盘 空间 ( 即 用 于 存放 网 站 的 服 
务 器 中 的 硬盘 空间 )。 

在 注册 了 域名 之 后 ， 还 需要 进行 域名 解析 。 

域名 是 为 了 方便 记忆 而 专门 建立 的 一 套 地 址 转换 系统 。 要 访问 一 台 互 联网 上 的 服务 器 ， 
最 终 还 必须 通过 IP 地 址 来 实现 ， 域 名 解析 就 是 将 域名 重新 转换 为 P 地 址 的 过 程 。 

一 个 域名 只 能 对 应 一 个 人 地 址 ， 而 多 个 域名 则 可 同时 被 解析 到 一 个 PP 地 址 。 域 名 解析 
需要 由 专门 的 域名 解析 服务 器 (DNS) 来 完成 。 


13.2 测试 网 站 


网 站 上 传 到 服务 器 后 ， 需 要 做 的 工作 就 是 在 线 测 试 网 站 ， 这 是 一 项 十 分 重要 又 非常 烦琐 
的 工作 。 在 线 测试 工作 包括 测试 网 页 外 观 、 测 试 链接 、 测 试 网 页 程序 、 检 测 数据 库 ， 以 及 测 
试 下 载 时 间 是 否 过 长 等 。 


13.2.1 案例 1 一 一 测试 站 点 范围 的 链接 


测试 网 站 超 链接 ， 也 是 上 传 网 站 之 前 必 不 可 少 的 工作 之 一 。 对 网 站 的 超 链接 逐一 进行 测 
试 ， 不 仅 能 够 确保 访问 者 打开 链接 目标 ， 还 可 以 使 超 链 接 目 标 与 超 链 接 源 保持 高 度 的 统一 。 
在 Dreamweaver CS6 中 进行 站 点 各 页 面 超 链接 测试 的 步骤 如 下 。 
EC 打开 网 站 的 首页 ， 在 窗口 中 选择 【站 点 】 一 【检查 站 点 范围 的 链接 】 菜 单 命 
令 ， 如 图 13-1 所 示 。 


在 Dreamweaver CS6 设计 器 的 下 端 弹出 【链接 检查 器 】 面 板 ， 并 给 出 本 页 页 面 
的 检测 结果 ， 如 图 13-2 所 示 。 
一 一 
新 于 站 上 IN)- 
新 尘 Business Catalyst 站 点 (~ 
入 a 站 MW) 
(6) Cul+shift+D 
Lele] CtrlrAlt+Shift+D 
上 传 四 CoshiftU 
li CtlrAltrShift+U 
MU) 
旺 未 取出 者 (8).。 
人 
报告 MD- 


FF(S).. 
同步 站 点 范围 (7)- 


改变 站 点 范围 的 链接 (Q… 
高 级 (A) » 


phoneGap Build 服务 


图 13-1 选择 【检查 站 点 范围 的 链接 】 菜 单 命令 图 13-2 【链接 检查 器 】 面 板 
区 于 BY 如 果 需 要 检测 整个 站 点 的 超 链接 时 ， 单 击 左 侧 的 区 按钮 ， 在 弹出 的 下 拉 菜单 中 


选择 【检查 整个 当前 本 地 站 点 的 链接 】 命 令 ， 如 图 13-3 所 示 。 
ECG 在 【链接 检查 器 】 底 部 弹出 整个 站 点 的 检测 结果 ， 如 图 13-4 所 示 。 


检查 当前 文档 中 的 链接 {L) 
检查 整个 当前 本 地 站 点 的 链接 (E) 人 


之 断 Wo mm 
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检查 处 点 中 了 所 选 文件 的 链接 (L) 


[Be /indechtm 
[Be indechtm 


i 
图 13-3 检查 整个 当前 网 站 图 13-4 ”站 点 测试 结果 
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13.2.2 ”案例 2 一 一 改变 站 点 范围 的 链接 


更 改 站 点 内 某 个 文件 的 所 有 链接 的 具体 步骤 如 下 。 
EEC) 在 窗口 中 选择 【站 点 】 一 【改变 站 点 范围 的 链接 】 菜 单 命令 ， 打 开 【 更 改 整 个 
站 点 链接 】 对 话 框 ， 如 图 13-5 所 示 。 
ED 在 【更 改 所 有 的 链接 】 文 本 框 中 输入 要 更 改 链接 的 文件 ， 或 者 单 击 右边 的 【 浏 
览 文件 】 按 钮 回 ， 在 打开 的 【选择 要 修改 的 链接 】 对 话 框 中 选中 要 更 改 链接 的 文 
件 ， 然 后 单 击 【 确 定 】 按 钮 ， 如 图 13-6 所 示 。 
EECe) 在 【 变 成 新 链接 】 文 本 框 中 输入 新 的 链接 文件 ， 或 者 单 击 右边 的 【浏览 文件 】 
按钮 铝 ， 在 打开 的 【选择 新 链接 】 对 话 框 中 选中 新 的 链接 文件 ， 如 图 13-7 所 示 。 
ER 单 击 【确定 】 按 钮 ， 即 可 改变 站 点 内 某 个 文件 的 链接 情况 ， 如 图 13-8 所 示 。 
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13-6 【选择 要 修改 的 链接 】 对 话 框 


图 13-7 【选择 新 链接 】 对 话 框 图 13-8 更 改 整个 站 点 链接 


13.2.3 ”案例 3 一 一 查找 和 替换 


在 Dreamweaver CS6 中 ， 对 整个 站 点 中 所 有 文档 进行 源 代 码 、 标 签 等 内 容 查找 和 蔡 换 的 
具体 操作 步骤 如 下 。 
EEC 选择 【编辑 】 一 【查找 和 替换 】 菜 单 命令 ， 如 图 13-9 所 示 。 
ECXDp 打开 【查找 和 蔡 换 】 对 话 框 ， 在 【查找 范围 】 下 拉 列 表 框 中 ， 可 以 选择 【当前 
文档 】、【 所 选 文 字 】、【 打 开 的 文档 】 和 【整个 当前 本 地 站 点 】 等 选项 ， 在 【 搜 
索 】 下 拉 列 表 框 中 ， 可 以 选择 对 【文本 】、【 源 代码 】 和 【指定 标签 】 等 内 容 进行 
搜索 ， 如 图 13-10 所 示 。 
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13-9 ”选择 【查找 与 替换 】 命 令 13-10 【查找 和 替换 】 对 话 框 


EESep 在 【查找 】 列 表 框 中 输入 要 查找 的 具体 内 容 ， 在 【车 换 】 列 表 框 中 输入 要 替换 
的 内 容 ; 在 【选项 】 选 项 组 中 ， 可 以 设置 【区 分 大 小 写 】、【 全 字 匹 配 】 等 选项 。 
单 击 【 查 找 下 一 个 】 或 者 【替换 】 按 钮 ， 就 可 以 完成 对 页 面 内 的 指定 内 容 的 查找 和 
蔡 换 操作 。 


13.2.4 ”案例 4 一 一 清理 文档 


测试 完 超 链接 之 后 ， 还 需要 对 网 站 中 每 个 页 面 的 文档 进行 清理 。 在 Dreamweaver CS6 
中 ， 可 以 清理 一 些 不 必要 的 HIML， 以 此 增加 网 页 打开 的 速度 。 清 理 文 档 的 具体 操作 步骤 
如 下 。 
1. 清理 不 必要 的 HTML 
区 于 选择 【命令 】 一 【清理 XHTML 】 菜 单 命令 ， 弹 出 【清理 HTML/XHTML) 对 
话 框 。 
EEJPp 在 【清理 HIML/XHTML 】 对 话 框 中 ， 可 以 设置 对 【 空 标签 区 块 〗、【 多 余 的 
嵌 套 标签 】 和 【Dreamweaver 特殊 标记 】 等 内 容 的 清理 ， 有 具体 设置 如 图 13-11 所 示 。 
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回 Dreamweaver 特殊 标记 
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选项 贱 已 可 能 合 并 讼 要 的 《font》 标 径 
死 成 时 显示 动作 记录 


图 13-11 清理 不 必要 的 HTML 
EECRB) 设置 完成 后 单 击 【 确 定 】 按 钮 ， 即 可 完成 对 页 面 指定 内 容 的 清理 。 
2. 清理 Word 生成 的 HTML 


EC 选择 【命令 】 一 【清理 Word 生成 的 HTML】 菜单 命令 ， 打 开 【 清 理 Word 生成 
的 HTML】 对 话 框 ， 如 图 13-12 所 示 。 

EEDD9 在 【基本 】 选 项 卡 中 ， 可 以 设置 要 清理 的 来 自 Word 文档 的 特定 标记 、 背 景 颜色 
等 选项 ;在 【详细 】 选 项 卡 中 ， 可 以 进一步 地 设置 要 清理 的 Word 文档 中 的 特定 标记 
以 及 CSS 样式 表 的 内 容 ， 如 图 13-13 所 示 。 

本 BY 设置 完成 后 单 击 【确定 】 按 钮 ， 即 可 完成 对 由 Word 生成 的 HTML 的 内 容 的 
清理 。 


诈 济 于 二 副 一 尊 沪 号 淹 哮 闫 > 汝 记 协 8} 小于 


25@ 


Dreamweaver 动态 网 站 开发 


案例 课堂 四 一 
ws# 1 sz | 和 | 
| CE 
re me pe 


万 meag> 的 Worg nega 和 lnx 本 和 
PY He) 
人 


< 下 end 条 
3 


厅 孝 志 时 县 示 站 作 记 寻 


图 13-12 【基本 】 选 项 卡 图 13-13 【详细 】 选 项 卡 


13.3 上 传 网 站 


网 站 测试 好 以 后 ， 接 下 来 最 重要 的 工作 就 是 上 传 网 站 。 只 有 将 网 站 上 传 到 远程 服务 器 
上 ， 才 能 让 浏览 者 浏览 。 设 计 者 既 可 利用 Dreamweaver 软件 自 带 的 上 传 功能 ， 也 可 利用 专门 
的 FTP 软件 上 传 网 站 。 


13.3.1 案例 5 一 一 使 用 Dreamweaver 上 传 网 站 


在 Dreamweaver CS6 中 ， 使 用 站 点 窗口 工具 栏 中 的 电 和 会 按钮 ， 既 可 将 本 地 文件 夹 中 的 
文件 上 传 到 远程 站 点 ， 也 可 将 远程 站 点 的 文件 下 载 到 本 地 文件 夹 中 。 将 文件 的 上 传 /下 载 操作 
和 存 回 /取出 操作 相 结合 ， 就 可 以 实现 全 功能 的 站 点 维护 。 具 体操 作 步 骤 如 下 。 

TIY 过 择 【站 点 】 一 【管理 站 点 】 菜 单 命令 ， 打 开 【 管 理 站 点 】 对 话 框 ， 如 图 13-14 

所 示 。 
本 TY 在 【管理 站 点 】 对 话 框 中 单 击 【 编 辑 】 按 钮 名， 打开 【站 点 设置 对 象 】 对 话 
框 ， 选 择 【 服 务 器 】 选 项 ， 如 图 13-15 所 示 。 


图 13-14 【管理 站 点 】 对 话 框 图 13-15 【站 点 设置 对 象 】 对 话 框 


本 BY 单 击 右 侧面 板 中 的 击 按钮， 如 图 13-16 所 示 。 
ECG 在 【服务 器 】 文 本 框 中 输入 服务 器 的 名 称 ， 在 【连接 方法 】 下 拉 列 表 框 中 选择 
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FTP 选项 ， 在 【FTP 地 址 】 文 本 框 中 输入 服务 器 的 地 址 ， 在 【用 户 名 】 和 【密码 】 


文本 框 中 输入 相关 信息 ， 单 击 【 测 试 】 按 钮 ， 可 以 测试 网 络 是 否 连 接 成 功 ， 单 击 


【保存 】 按 钮 ， 完 成 设置 ， 如 图 13-17 所 示 。 
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图 13-16 【服务 器 】 选 项 卡 图 13-17 输入 服务 器 信息 


区 于 BY 返回 【站 点 设置 对 象 】 对 话 框 ， 如 图 13-18 所 示 。 
本 TY 单 击 【保存 】 按 钮 ， 完 成 设置 。 返 回 到 【管理 站 点 】 对 话 框 ， 如 图 13-19 所 示 。 


13-18 【站 点 设置 对 象 】 对 话 框 图 13-19 【管理 站 点 】 对 话 框 


EDp 单 击 【完成 】 按 钮 ， 返 回 站 点 文件 窗口 。 在 【文件 】 面 板 中 ， 单 击 工具 栏 上 的 
时 按钮 ， 如 图 13-20 所 示 。 
EEJDp 打开 上 传 文件 窗口 ， 在 该 窗口 中 单 击 喝 按钮 ， 如 图 13-21 所 示 。 
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图 13-20 【文件 】 面 板 图 13-21 上 传 文件 窗口 
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ED 开始 连接 到 我 的 站 点 之 上 。 单 击 工具 栏 中 的 会 按钮 ， 弹 出 一 个 信息 提示 框 ， 如 
图 13-22 所 示 。 
EC 单 击 【 确 定 】 按 钮 ， 系 统 开始 上 传 网 站 内 容 ， 如 图 13-23 所 示 。 


图 13-22 ”信息 提示 框 13-23 ”开始 上 传 文件 


13.3.2 ”案例 6 一 一 使 用 FTP 工具 上 传 网 站 


利用 专门 的 FTP 软件 上 传 网 页 ， 具 体操 作 步 又 如 下 (本 小 节 以 Cute FTP 8.0 进行 讲解 )。 
EEC 打开 FTP 软件， 选择 【新 建 】 一 【FTP 站 点 】 菜 单 命令 ， 如 图 13-24 所 示 。 
国耻 弹出 【站 点 属性 ， 未 标题 (1)】 对 话 框 ， 如 图 13-25 所 示 。 
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13-24 FTP 软件 操作 界面 图 13-25 【站 点 属性 : 未 标题 (1)】 对 话 框 


EC) 在 【站 点 属性 : 未 标题 (1)】 对 话 框 中 根据 提示 输入 相关 信息 ， 单 击 【 链 接 】 按 
钮 ， 连 接 到 相应 的 地 址 ， 如 图 13-26 所 示 。 

EC 返回 主 界面 后 ， 切 换 至 【本 地 驱动 器 】 选 项 卡 ， 选 择 要 上 传 的 文件 ， 如 图 13-27 
所 示 。 

ECXD 在 左 侧 窗口 中 选中 需要 上 传 的 文件 并 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【上 载 】 
命令 ， 如 图 13-28 所 示 。 

EEC 这 时 ， 在 窗口 的 下 方 窗口 中 将 显示 文件 上 传 的 进度 以 及 上 传 的 状态 ， 如 图 13-29 
所 示 。 

EED 上 传 完成 后 ， 用 户 即 可 在 外 部 进行 查看 ， 如 图 13-30 所 示 。 
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图 13-26 输入 信息 


ane 


Ey doo a | i 


00 Jal 
013n0 oa 
20830415- 
O36 6 
O30 0338 
O43/0 ee 
ET 
91020162- 
aa3 aa 
aa B46 
98709100- 
oa7 52- 
2083081607- 
ET 


_ RE 29 
UO ora 
FT - 


ap 1 
asp pa 
Zam lssL- 
at aaa 
la aa 
tap ant 
tb 1 
203/590 16 
mn tens” | wm 
E73 sm 
?CTE Weendninie eton Documerts,, 
? SBE HeerdniniermoN\Documerts,. 
mee ES Meena mon 
aoera dminie ete Documernt. 
;EE HavereAminio eo Doanent, 


[| 


1 03 Htbvenihdndmwnenhpeaumerml 


上 


图 13-28 开始 上 传 文件 
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图 13-29 文件 上 传 的 进度 
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查看 文件 上 传 结果 
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13.4” 跟 我 练 练 手 


13.4.1 练习 目标 
能 够 熟练 掌握 本 章节 所 讲 内 容 。 


13.4.2 上 机 练习 


练习 1: 测试 网 站 。 
练习 2: 上 传 网 站 。 


13.5 高 手 甜 点 


甜点 1: 正确 上 传 文件 。 


上 传 网 站 的 文件 需要 遵循 两 个 原则 : 首先 要 确定 上 传 的 文件 一 定 会 被 网 站 使 用 ， 不 要 上 
传 无 关 紧 要 的 文件 ， 并 尽量 缩小 上 传 文件 的 体积 : 其 次 上 传 的 图 片 要 尽量 采用 压缩 格式 ， 这 
不 仅 可 以 节省 服务 器 的 资源 ， 而 且 可 以 提高 网 站 的 访问 速度 。 

甜点 2: 设置 网 页 自动 关闭 。 


如 果 希 望 网 页 在 指定 的 时 间 内 能 自动 关闭 ， 可 以 在 网 页 源 代 码 的 标签 后 面 加 入 如 下 
代码 : 


<script LANGUAGE="JavaScript"> 
setTimeout ("self.close()",5000) 
</script> 


代码 中 的 5000 表示 5 秒 钟 ， 它 是 以 毫秒 为 单位 的 。 
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第 15 章 架 起 动态 网 页 的 桥梁 一 一 使 用 MySQL 数 
据 库 

第 16 章 开启 动态 网 页 制作 之 路 一 一 动态 网 站 应 用 
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第 17 章 娱乐 休闲 类 网 站 开发 实战 
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14.1 准备 互动 网 页 的 执行 环境 
在 创建 动态 网 站 之 前 ， 用 户 需 要 准备 互动 网 页 的 执行 环境 。 
14.1.1 什么 是 PHP 


PHP (Personal Home Page， 目 前 已 经 正名 为 : Hypertext Preprocessor)， 与 ASP 相同 ， 是 
一 种 属于 内 嵌 于 HTML 文件 案 中 的 程序 代码 语言 。PHP 程序 可 以 根据 不 同 的 状态 输出 不 同 的 
网 页 内 容 ， 是 一 种 快速 流行 且 功 能 强大 的 网 页 程序 语言 。 使 用 PHP 程序 来 开发 网 站 的 优势 
如 下 。 

(1) PHP 可 以 在 Linux 与 Windows 环境 下 执行 ， 搭 配 着 这 两 个 操作 系统 中 的 服务 器 软 
件 ， 比 如 Apache 或 PWS、IHS， 能 让 您 所 开发 出 来 的 程序 轻易 地 跨越 两 个 平台 来 执行 ， 不 须 
改写 。 

(2) PHP 所 使 用 的 执行 环境 ， 无 论 在 软 硬 件 的 投资 成 本 都 相当 的 低廉 ， 且 所 开发 的 程序 
功能 都 相当 强大 完整 ， 可 以 很 明显 提升 企业 的 竞争 力 ! 

(3) PHP 所 使 用 的 语法 简单 易 懂 ， 若 用 户 已 经 有 其 他 程序 语言 的 基础 ， 则 可 以 很 轻松 地 
跨 入 PHP 程序 设计 的 领域 。 


14.1.2 执行 PHP 的 程序 


PHP 程序 必须 在 支持 PHP 的 网 站 服务 器 才能 操作 ， 用 户 不 能 直接 选择 网 页 来 执行 浏览 。 
所 以 在 执行 PHP 程序 之 前 ， 必 须 拥 有 一 个 服务 器 空间 。 

下 面 介 绍 两 种 不 同 的 网 站 服务 器 : Apache 与 IS 的 安装 与 设置 ， 并 且 搭 配 PHP 安装 程序 
的 加 入 ， 让 两 种 网 站 服务 器 都 有 执行 PHP 程序 的 能 力 。 

另外 ， 在 Dreamweaver CS6 中 ，PHP 的 程序 必须 搭配 MySQL 的 数据 库 来 制作 互动 网 
页 。 笔 者 建议 用 户 在 安装 完 网 站 服务 器 后 再 安装 MySQL 数据 库 ， 因 为 无 论 用 户 采 取 何 种 服 
务 器 环境 都 不 会 影响 MySQL 数据 库 的 执行 。 


14.2 架设 IIS +PHP 的 执行 环境 
本 节 主 要 讲述 IS+PHP 的 执行 环境 配置 方法 。 


14.2.1 案例 1 一 一 IIS 网 站 服务 器 的 安装 与 设置 


1.1IS 网 站 服务 器 的 启动 


在 Windows 7 中 ，Microsoft Internet 信息 服务 (IIS) 是 默认 安装 好 的 ， 用 户 只 需要 启动 该 服 
务 即 可 。 上 有 具体 操作 步骤 如 下 。 


EC 打开 【Windows 功能 】 对 话 框 ， 展 开 【Internet 信息 服务 】 选 项 ， 选 择 【Web 管 
理工 具 】 和 【万 维 网 服务 】 复 选 框 ， 然 后 单 击 【确定 】 按 钮 即 可 启动 IS 网 络 服务 
器 ， 如 图 14-4 所 示 。 
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ms 

第 是 

EC 单 击 【 开 始 】 按 钮 ， 在 弹出 的 列表 中 选择 【控制 面板 】 选 项 ， 如 图 14-1 所 示 。 局 
EEIDp 打开 【控制 面板 】 窗 口 ， 选 择 【程序 】 选 项 ， 如 图 14-2 所 示 。 到 
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图 14-1 选择 【控制 面板 】 选 项 图 14-2 选择 【程序 】 选 项 NN 
EEJep 打开 【控制 面板 \ 程 序 】 窗 口 ， 选 择 【 打 开 或 关闭 Windows 功能 】 选 项 ， 如 
图 14-3 所 示 。 
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Ce ]_w | 
图 14-3 【控制 面板 \ 程 序 】 窗 口 图 14-4 【Windows 功能 】 对 话 杠 


EEC 测试 IS 网 站 服务 器 是 否 安装 成 功 。 打 开 正 浏览 器 ， 在 网 址 栏 输入 : 
“http://localhost/”， 运 行 后 效果 如 图 14-5 所 示 ， 说 明 IIS 已 成 功 安装 。 


2. 设置 IIS 网 站 服务 器 


如 果 用 户 是 按照 前 述 的 方式 来 启动 IS 网 站 服务 器 ， 那 么 整个 网 站 服务 器 的 根 目录 就 位 于 
< 系统 盘 符 :netpubvwwwroot> 中 ， 也 就 是 说 ， 如 果 要 添加 网 页 到 网 站 中 显示 ， 都 必须 将 网 页 
放置 在 这 个 目录 之 下 。 

上 述 系统 默认 的 存放 路 径 比 较 长 ， 使 用 起 来 相当 不 便 ， 下 面 介绍 更 改 网 站 虚拟 目录 的 方 
法 ， 这 里 将 网 站 的 虚拟 目录 放置 在 <C:\dwphp> 文 件 夹 中 ， 具 体 的 操作 步 又 如 下 。 
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EC 右 击 桌面 【计算 机 】 图 标 ， 在 弹出 的 快捷 菜单 中 选择 【管理 
图 14-6 所 示 。 


所 示 。 
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EE ll 
上 文件 的 坊 站 (0 豆 百 由 双 革 天 和 工具 0) 床 动 后 


8】 菜 单 命令 ， 如 


EDp 打开 【计算 机 管理 】 窗 口 ， 选 择 【Intermet 信息 服务 】 一 【网 站 】 一 Default Web 
Site 选项 ， 右 击 并 在 弹出 的 快捷 菜单 中 选择 【添加 虚拟 目录 】 菜 单 命令 ， 如 图 14-7 


14-6 选择 【管理 】 菜 单 命令 14-7 ”添加 虚拟 目录 


TB> 打开 【添加 虚拟 目录 】 对 话 框 ， 在 别名 中 输入 虚拟 网 站 的 名 称 ， 这 里 输入 


“dwphp”， 然 后 选择 物理 路 径 为 Cdwphp， 如 图 14-8 所 示 。 


EGR 单 击 【确定 】 按 钮 ， 即 完成 了 IIS 网 站 服务 器 设置 的 更 改 。IIS 网 站 服务 器 的 网 


站 虚拟 目录 已 被 更 改 为 <C:\dwphp>。 
3. 测试 题 后 的 IS 


这 里 需要 制作 一 个 简单 的 网 页 ， 测 试 一 下 放置 在 刚才 所 更 改 的 虚拟 目录 里 的 网 页 是 否 能 


够 被 浏览 器 预览 。 
具体 的 操作 步骤 如 下 。 


四 
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EEC 选择 【开始 】 一 【所 有 程序 】 一 【附件 】 一 【记事 本 】 选 项 ， 打 开 【 记 事 本 】 
窗口 ， 在 其 中 输入 相关 代码 ， 如 图 14-9 所 示 。 


ETCEESN | 
i EECSEE 6 可 
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网 站 名 称 ， Defeslt Web Site 
路 径  / 


图 14-8 【添加 虚拟 目录 】 对 话 框 图 14-9 【记事 本 】 窗 口 


EC 选择 【文件 】 一 【保存 】 菜 单 命令 ， 从 而 保存 这 个 网 页 。 将 这 个 文件 命名 为 
index.html， 而 保存 的 位 置 就 是 <C:\dwphp>， 如 图 14-10 所 示 。 

EEC 打开 浏览 器 ， 输 入 本 机 网 址 及 添加 的 网 页 名 称 : “http://localhost/dwphp/index. 
html”， 运 行 效果 如 图 14-11 所 示 。 
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图 14-10 【另存 为 】 对 话 框 图 14-11 ”网 页 测试 效果 


14.2.2 ”案例 2 一 一 在 lIS 网 站 服务 器 上 安装 PHP 


IIS 网 站 服务 器 的 安装 与 设置 都 完成 后 ， 就 可 以 安装 PHP 软件 了 。 用 户 可 以 通过 网 址 
http://www.php.net/downloads.php 获取 PHP 软件 。 下 面 以 下 载 的 php-5.3.17-Win32-VC9- 
x86.msi 为 例 进 行 讲解 安装 的 方法 。 

1. PHP 的 安装 


在 IS 网 站 服务 器 上 安装 PHP 的 具体 操作 步骤 如 下 。 

EEJD 双击 安装 程序 ， 进 入 安装 界面 ， 单 击 Next 按钮 开始 安装 ， 如 图 14-12 所 示 。 

EEJDp 打开 版 权 说 明 界 面 ， 阅 读 完 版 权 说 明 后 单 击 I accept the terms in the license 
Agreement 按钮 继续 安装 ， 如 图 14-13 所 示 。 
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图 14-12 欢迎 界面 14-13 ”版 权 信息 界面 


EEC) 打开 PHP 安装 路 径 设置 页 面 ， 在 其 中 可 以 根据 实际 需要 设置 PHP 安装 路 径 ， 单 

击 OK 按钮 ， 如 图 14-14 所 示 。 

ES 打开 服务 器 安装 界面 ， 选 择 IS CG 为 本 机 所 使 用 的 网 站 服务 器 ， 单 击 Next 按 
钮 ， 如 图 14-15 所 示 。 


EEC 
三 二 一 i 
图 14-14 ”设置 安装 路 径 图 14-15 选择 要 安装 的 服务 器 


EEC 打开 准备 安装 窗口 ， 单 击 Install 按钮 ， 如 图 14-16 所 示 。 
ED 安装 完成 后 ， 单 击 Finish 按钮 ， 如 图 14-17 所 示 。 
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图 14-16 ”准备 安装 界面 图 14-17 完成 安装 界面 


EC 打开 IS， 单 击 Web 服务 器 扩展 ， 选 择 【 所 有 未 知 CGI 扩展 】， 然 后 单 击 【 允 
许 】 按 钮 ， 如 图 14-18 所 示 。 
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14-18 ”扩展 Web 服务 器 


2. 测试 PHP 执行 在 IIS 网 站 服务 器 上 


PHP 安装 完成 后 ， 即 可 进行 测试 操作 ， 检 测 是 否 安装 成 功 。 具 体操 作 步 又 如 下 。 

EEC 选择 【开始 】 一 【所 有 程序 】 一 【附件 】 一 【记事 本 】 选 项 ， 打 开 【 记 事 本 】 
窗口 ， 在 其 中 输入 PHP 程序 ， 如 图 14-19 所 示 。 

EEJP) 选择 【文件 】 一 【保存 】 来 保存 这 个 网 页 。 将 文件 命名 为 <index.php>， 保 存 的 
位 置 为 <C:\dwphp>， 如 图 14-20 所 示 。 


图 14-19 【记事 本 】 窗 口 图 14-20 【另存 为 】 对 话 框 
ETE> 打开 浏览 器 ， 输 入 本 机 网 址 及 添加 的 网 页 名 称 “http://localhostiindex.php”。 浏 


览 器 能 够 正确 显示 刚刚 完成 的 网 页 ， 并 显示 该 网 站 目前 PHP 相关 信息 ， 说 明 安 装 成 
功 ， 如 图 14-21 所 示 。 
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14-21 ”测试 网 页 结果 
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14.3 ”架设 Apache+PHP 的 执行 环境 
本 节 主要 讲述 Apache+PHP 执行 环境 措 建 的 方法 。 
14.3.1 案例 3 一 Apache 网 站 服务 器 的 安装 与 设置 


Apache 网 站 服务 器 是 一 个 免费 的 软件 ， 用 户 可 以 通过 网 址 http://httpd.apache.org/ 获 取 该 
软件 。 下 面 以 安装 与 配置 httpd-2.2.22-win32-x86-no_ssl.msi 为 例 进行 讲解 架设 Apache+PHP 执 
行 环境 的 方法 。 

1. 关闭 原 有 的 网 站 服务 器 


在 安装 Apache 网 站 服务 器 之 前 ， 如 果 所 使 用 的 操作 系统 已 经 装 有 网 站 服务 器 ， 比 如 IIS 
网 站 服务 器 等 ， 用 户 必须 先 停止 这 些 服 务 器 ， 才 能 完成 Apache 网 站 服务 器 的 安装 。 
以 Windows 7 的 操作 系统 为 例 ， 关 闭 原 有 网 站 服务 器 的 操作 步骤 如 下 。 
ED 右 击 桌 面 上 的 【计算 机 】 图 标 ， 在 弹出 的 快捷 菜单 中 选择 【管理 】 命 令 ， 如 
14-22 所 示 。 
区 于 打开 【计算 机 管理 】 窗 口 ， 选 择 【Intermet 信息 服务 GIS)】 一 【网 站 】 下 的 【 默 


认 的 网 站 】 选 项 ， 然 后 在 【操作 】 窗 格 中 单 击 【 停 止 】 按 钮 ， 即 可 关闭 原 有 的 网 站 
服务 器 ， 如 图 14-23 所 示 。 


Sr 


图 14-22 选择 【管理 】 菜单 命令 图 14-23 【计算 机 管理 】 窗 口 


2. 安装 Apache 网 站 服务 器 


安装 Apache 网 站 服务 器 的 方法 ， 具 体 的 操作 步骤 如 下 。 

EEJDp 双击 下 载 的 软件 可 以 执行 程序 ， 进 入 欢迎 安装 界面 ， 单 击 Next 按钮 开始 安装 ， 
如 图 14-24 所 示 。 

ED 打开 软件 版 权 说 明 界 面 ， 在 其 中 选择 接受 Apache 服务 器 软件 的 版 权 说 明 选 项 ， 
单 击 next 按钮 ， 如 图 14-25 所 示 。 
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WARNING: Ths progran is protected by copyrignt bw and i i 
Wp. ant 


Taceptthe terms in the lcense aoreement 
ia nor occept the Emma r the teenae ogreement 


TREE 


Ee C2 Sm [| We> | on 


图 14-24 欢迎 界面 图 14-25 ”版权 说 明 界 面 


EEC 打开 许可 证 协议 说 明 界面 ， 单 击 Next 按钮 继续 安装 ， 如 图 14-26 所 示 。 
ES 打开 服务 器 设置 对 话 框 ， 设 置 本 机 的 网 域名 称 及 主机 名 称 。 若 只 在 本 机 测试 ， 
则 全 部 输入 “localhost”， 设 置 用 户 的 电子 邮件 ， 以 便 联系 ， 设 置 可 操作 用 户 ， 建 议 
选择 如 图 14-27 中 所 示 的 选项 让 本 机 用 户 皆 可 操作 ， 最 后 单 击 Next 按钮 继续 安装 。 


[ET FEEEETETTETTITTTT x|| 
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Apache HTTP Semver Netork Donan (e.6. someret com) 
st 


Inatis H2 

[ne Apache HTTP Servar is apowerul andfieyible HTTPI 1 compliant web sener Server Neme (e.g ww,someret con): 
Driginally designed as a replacemert for the NCSA HTTP Server, Hhas grown to be 

lhe most popular web servar on the ntemet As aprcjec ofthe Apache Sofware 


Foundation, the developers aim to collaboratwely devalop and maintan arobust a 
commercial-orace, stangaras-0asec server win Teey ayalaole source coae. ee es 


[re Latost Vorsion 
Deotans ofthe latestversion can be found on tha Apache HTTP sener projectpage Inetal Mpache HTTP Server 2 2prograne and ehorteute for: 
es y for MB Ueare, en Port 0, 36 Service ~ Recommenced. 
到 only for Pe Ourent User, on Fort 8080, when started Manaly, 
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图 14-26 许可 证 协议 说 明 界 面 图 14-27 ”服务 器 设置 界面 


EEJD) 打开 选择 安装 类 型 界面 ， 这 里 选择 Typical 一 般 安装 模式 ， 单 击 Next 按钮 继续 
安装 ， 如 图 14-28 所 示 。 

EEC 打开 软件 安装 路 径 设置 界面 ， 这 里 更 改 为 cvappache2.2， 单 击 Next 按钮 继续 安 
装 ， 如 图 14-29 所 示 。 

EEC 至 此 所 有 安装 的 选项 都 已 设置 完成 。 单 击 Install 按钮 开始 安装 ， 如 图 14-30 
所 示 。 

EC) 至 此 所 有 的 安装 操作 完成 后 。 单 击 Finish 按钮 结束 安装 ， 如 图 14-31 所 示 。 

ED 安装 完毕 之 后 ，Apache 网 站 服务 器 也 随 之 被 启动 ， 在 桌面 右 下 角 的 工作 栏 中 会 
出 现 Apache 网 站 服务 器 图 标 ， 即 表示 目前 Apache 网 站 服务 器 已 被 启动 ， 如 图 14-32 
所 示 。 

EE 区 0 打开 浏览 器 ， 在 网 址 栏 输入 “http://localhost/”， 如 果 出 现 如 图 14-33 所 示 浏 览 

器 页 面 信息 ， 即 表示 Apache 网 站 服务 器 已 经 安装 成 功 并 执行 正常 。 
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Destination Folder 
Ch Change to retsl to a dfferert foder 
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DY moo resvowhe ssi Foamsim Vone A 


msllshield 


ok 


es ee 


< back 


Ready to Install the Program 
The wzard sready to begn nstalaton， 


id Inetal to begn te ncalaton 


If you want to revew or chance anv of vour Installason setiros cick 6ack Click Cancel to 
exit the wizard. 


Inatalshield 一 


图 14-29 更 改 软件 安装 路 径 


ver 2.2 — Installation Vizerd 
Installation Wizard Completed 


The Inetalaton Ward hac euccecefuly ncaled hpadheHTTP 
Server 2.2.22, didkFrishto exit the wizard 


[nh Canal 


图 14-30 ”开始 安装 


14-32 ”启动 图 标 


3. 设置 Apache 网 站 服务 器 


如 果 用 户 是 按照 上 述 的 方式 来 安装 Apache 网 站 服务 器 ， 那 么 目前 整个 网 站 服务 器 的 根 目 


14-31 安装 完成 


加 
GO /ne lel x 
名 x 

| 文件 F) 编辑 于) 查看 VW) 收藏 夫 必 ) 工具 CT) 帮助 00 


It works! 


下 


型 | 


[R100% 


14-33 ”浏览 器 页 面 


录 就 位 于 <C:\Apache2.2> 中 。 
如 果 用 户 不 愿意 使 用 默认 的 路 径 ， 可 以 将 其 更 改 。 不 过 在 更 改 之 前 ， 必 须 先 打 
<httpd.conf> 文 件 ， 即 在 该 文件 中 修改 ， 具 体 的 操作 步骤 如 下 。 
选择 【开始 】 一 【所 有 程序 】 一 Apache HTTP Server 2.2 一 Configure Apache 
Server 一 Edit the Apache httpd.conf Configuration File 选项 ， 如 图 14-34 所 示 。 
打开 <httpd.con 作 文件 ， 在 其 中 选择 【编辑 】 一 【查找 】 菜 单 命令 ， 如 图 14-35 
所 示 。 
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KC。 宣 乒 下 一 个 00 由 tructions in here without nderstandiy 
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2 i 8 ba 18 the fl fy {1 
过 过 程序 和 文件 EA 时 间 / 日 区) 5 les begin with “/” (or ve for Vw 
| 
p= 8 SIs|We) | 
图 14-34 打开 <httpd.con 人 > 文件 图 14-35 选择 【查找 】 命 令 


四 了 BY 打开 【查找 】 对 话 框 ， 输 入 “DocumentRoot”， 单 击 【 查 找 下 一 个 】 按 钮 来 查 
找 要 修改 的 设置 字 串 ， 如 图 14-36 所 示 。 


加 
查找 内 容 :DocunentRoot| 查找 下 一 个 @) 


AAA EEC ZE 
厂 区 分 大 小 号 ©) | 个 向上 FW 他 向 Fo 


14-36 【查找 】 对 话 框 


EC 设置 文件 是 以 “DocumentRoot “文件 夹 路 径 ”” 的 方式 来 设置 网 站 的 根 目录 ， 
如 图 14-37 所 示 为 目前 的 设置 。 


# DocunentRoot: The directory out of which you will serve your 
# documents. By default, all requests are taken from this directory, but 
# synbolic links and aliases may be used to point to other locations. 


ITT "DD:/Progran Files/Apache Groupyapache2.9.527hpache2yhtdocs” 


14-37 ”系统 默认 路 径 
莉 于 BY 把 软件 默认 的 路 径 修改 为 想 要 更 改 的 路 径 ， 如 图 14-38 所 示 。 


Dreamweaver 动态 网 站 开发 
案例 课堂 Bb… 


# Documentkoot: Ihe directory out of which you will serve your 
# documents. By default, all requests are taken from this directory, but 
# symbolic links and aliases may be used to point to other locations. 


DocumentRoot “C:/Apache2.2/htdocs" 


14-38 更改 文 件 的 路 径 


Eue 设置 完毕 之 后 ， 保 存 并 关闭 <httpd.con 仑 文件 。 然 后 选择 【开始 】 一 【所 有 程 
序 】 一 Apache HTTP Server 2.2 一 Control Apache Server 一 Restart 选项 ， 重 新 启动 
Apache 网 站 服务 器 ， 这 样 更 改 的 路 径 才能 生效 ， 如 图 14-39 所 示 。 


0 
日 和 ache JITF Server £2 
pee omine poewentsttmm 
Eap, rw sea 

eit Moc suves 


ti Suiin 
Maresstt office 
4 下 天 


CeewmAr 部 
Ew 8 | |Ws|dl 
图 14-39 重启 Apache 网 站 服务 器 


如 此 一 来 Apache 网 站 服务 器 的 网 站 根 目录 已 被 更 改 为 < C:\Apache2.2\htdocs>。 此 时 还 需 
要 制作 一 个 简单 的 网 页 ， 放 置 在 刚才 所 更 改 的 网 页 根 目 录 里 ， 用 于 测试 网 页 能 否 被 浏览 器 正 
常 打开 。 有 具体 的 操作 步骤 如 下 。 
区 于 WY 选择 【开始 】 一 【所 有 程序 】 一 【附件 】 一 【记事 本 】 选 项 ， 打 开 【 记 事 本 】 
窗口 ， 在 其 中 输入 网 页 代码 ， 如 图 14-40 所 示 。 
区 TY 选择 【文件 】 一 【保存 文件 】 菜 单 命令 ,将 文本 保存 为 网 页 格式 ， 比 如 
<index.html>， 保 存 的 位 置 为 新 设置 的 路 径 <C:\Apache2.2\htdocs >， 如 图 14-41 所 示 。 


CEEEZXEKCYSEE TI -lolx 
文件 四， 绩 竹 四 格式 D) 得 看 W 二 00 me 二 | 


图 14-40 记事 本 窗口 图 14-41 【另存 为 】 对 话 框 
EC) 打开 浏览 器 ， 输 入 本 机 网 址 及 添加 的 网 页 名 称 “http://localhost/index.html”。 运 
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e; 


行 结果 如 图 14-42 所 示 ， 表 示 浏 览 器 能 够 正确 的 显示 网 页 。 


ni x[| 
」 文件 编辑 FE) 查看 W 收藏 只 0) 工具 CMT) 帮助 00 
这 是 一 个 服务 器 的 测试 软件 


14-42 ”网 页 预览 结果 


14.3.2 ”案例 4 一 一 在 Apache 网 站 服务 器 上 安装 PHP 


用 户 可 以 通过 网 址 (http://www.php.net/downloads.php) 免 费 下 载 PHP 软件 。 
1. PHP 的 安装 


在 Apache 网 站 服务 器 上 安装 PHP 的 具体 操作 步骤 如 下 。 

EC 双击 安装 文件 进入 安装 画面 ， 单 击 Next 按钮 开始 安装 ， 如 图 14-43 所 示 。 

ES 打开 版 权 说 明 界面 ， 阅 读 完毕 版 权 说 明 后 勾 选 I accept the terms in the license 
Agreement 复 选 框 ， 单 击 Next 按钮 继续 安装 ， 如 图 14-44 所 示 。 


End-User License Agreement 
Welcome to the PHP 5.3.17 Setup Wizard Piease read the folowng bcense agreement carefuly 


The Setup Wizard wAl install PHP 5.3.17 on your computer. 
Chck Next to continue or Cancel to ext the 


The PHP License, version 3.01 
[copyright (c) 1999 - 2010 The PHP Group. All rights 


[Redistribution and use in source and binary forms, 
ch or without 
dification, is permitted provided that the | 


Laccept the terms in the License Agreement 


_e | 


图 14-43 ”欢迎 界面 图 14-44 ”版 权 信息 界面 
打开 PHP 安装 路 径 对 话 框 ， 请 设置 PHP 安装 路 径 ， 单 击 Next 按钮 ， 如 图 14-45 
所 示 。 


EC 打开 服务 器 安装 窗口 ， 选 择 Apache 2.2.x Module 为 本 机 所 使 用 的 网 站 服务 器 ， 
即 选中 Apache 2.2.x Module 单 选 按钮 ， 单 击 Next 按钮 ， 如 图 14-46 所 示 。 
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14-45 ”设置 安装 路 径 


14-46 ”选择 服务 器 类 型 


在 打开 的 窗口 中 选择 Apache 配置 文件 所 在 目录 ， 然 后 单 击 Next 按钮 ， 如 图 14-47 


所 示 。 


区 于 在 打开 的 窗口 中 选择 需要 安装 的 功能 模块 ， 这 里 采用 默认 的 设置 ， 单 击 Next 按 


钮 ， 如 图 14-48 所 示 。 
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图 14-47 选择 Apache 配置 文件 所 在 目录 


图 14-48 选择 需要 安装 功能 模块 


打开 准备 安装 窗口 ， 单 击 Install 按钮 ， 如 图 14-49 所 示 。 
安装 完成 后 ， 单 击 Finish 按钮 ， 如 图 14-50 所 示 。 


IE 


Ready to install PHP 5.3.17 


Click instal to begm the nssalaton, Chck back to review or change anyofyour 
Inutalation setings, Click Cancel to exitthe wicard. 


mm [re] os | 


ed 


Completed the PHP 5.3.17 Setup Wizard 


Chk he Finish button to ext he Setup Whard, 


14-49 ”准备 安装 PHP 
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14-50 ”完成 安装 


2. 重启 Apache 服务 器 


安装 完 PHP 之 后 ， 还 需要 重新 启动 Apache 服务 器 ， 具 体操 作 步 骤 如 下 。 


S339 选择 【开始 】 一 Apache HTTP Server 2.2 一 Configure Apache Server 一 Edit the 
Pp: gure Ap 
相应 配置 信息 ， 如 图 14-51 所 示 。 


PHPIniDir “CG:\PHP\" 


Apache httpd.conf Configuration File 选项 ， 打 开 配 置 文件 ， 在 配置 文件 末尾 已 经 加 上 
HBEGIN PHP INSTALLER EDITS - REMOUE ONLY ON UNINSTALL 


LoadModule php5_nodule “C:\PHP\php5apache2_2.d11" 
HEND PHP INSTALLER EDITS - REMOUE ONLY ON UNINSTALL 


14-51 配置 文件 信息 
EEJDp 关闭 该 配置 文件 ， 然 后 选择 【开始 】 一 Apache HTTP Server 2.0.52 一 Control 


Apache Server 一 Restart 选项 ， 重 新 启动 Apache 服务 器 。 
3. 测试 PHP 执行 在 Apache 网 站 服务 器 上 
在 这 里 需要 制作 一 个 简单 的 PHP 网 页 ， 放 置 在 网 页 根 目录 里 ， 用 于 测试 Apache 网 站 服 
务 器 是 否 已 经 可 以 正确 解读 PHP 程序 。 操 作 步 又 如 下 。 


EEC 选择 【开始 】 一 【所 有 程序 】 一 【附件 】 一 【记事 本 】 选 项 ， 打 开 【 记 事 本 】 
窗口 ， 在 其 中 输入 相应 的 代码 ， 如 图 14-52 所 示 。 


EC 选择 【文件 】 一 【保存 文件 】 菜 单 命令 ， 将 该 文件 保存 为 网 页 ， 并 将 其 命名 为 
<index.php>， 保 存 位 置 为 <C:\apache\htdocs>， 如 图 14-53 所 示 。 
ET ee 0 
文件 F) 编辑 FE) 格式 (0) 查看 W 帮助 00 
php 
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| rE 
Le 


图 14-52 【记事 本 】 窗口 


【另存 为 】 对 话 框 
显示 该 网 站 目前 PHP 相关 信息 。 


14-53 
ES 打开 浏览 器 ， 输 入 本 机 网 址 及 添加 的 网 页 名 称 “http://localhost/index.php”， 
行 结果 如 图 14-54 所 示 。 从 中 可 以 看 出 浏览 器 能 够 正确 的 显示 刚刚 完成 的 网 页 ， 
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图 14-54 ”预览 效果 


14.4 MySQL 数据 库 的 安装 


设置 好 网 站 服务 器 之 后 ， 还 需要 安装 MySQL 数据 库 。MySQL 不 仅 是 一 套 功能 强大 、 使 
用 方便 的 数据 库 ， 还 是 一 个 可 以 跨越 不 同 平台 ， 提 供 各 种 不 同 操作 系统 的 工具 。 


14.4.1 案例 5 一 一 MySQL 数据 库 的 安装 


用 户 可 以 通过 网 址 (http://www.mysql.com/downloads/) 获 取 MySQL 数据 库 。 下 面 以 安装 
mysql-5.5.28-win32.msi 为 例 进行 讲解 数据 库 的 安装 方法 ， 有 具体 操作 步骤 如 下 。 
双击 下 载 好 的 安装 文件 ， 进 入 程序 安装 欢迎 画面 ， 单 击 Next 按钮 开始 安装 ， 如 
图 14-55 所 示 。 
打开 用 户 协 议 窗口 ， 选 择 I accept the terms in the License Agreement 复 选 框 后 ， 
单 击 Next 按钮 继续 安装 ， 如 图 14-56 所 示 。 
SQL Sorvar 5.5 Sotwp | 


End-User License Agreement 


Welcome to the MySQL Server 5.5 Setup 0 届 
izard RE 


Weeard, 


MuUSQLC | eee 有 
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图 14-55 ”欢迎 界面 图 14-56 用 户 协议 窗口 
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EC 打开 选择 安装 类 型 窗口 ， 选 择 Typical 后 单 击 Next 按钮 继续 安装 ， 如 图 14-57 
所 示 。 
打开 准备 安装 窗口 ， 单 击 mstall 按钮 继续 安装 ， 如 图 14-58 所 示 。 
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图 14-57 ”选择 安装 类 型 图 14-58 ”准备 安装 界面 


ED MySQL 开始 自动 安装 ， 并 显示 安装 的 进度 ， 如 图 14-59 所 示 。 
ECG 弹出 组 件 安装 界面 ， 单 击 next 按钮 ， 如 图 14-60 所 示 。 
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图 14-59 开始 安装 图 14-60 组件 安装 界面 


EDDD 打开 MySQL 企业 服务 器 对 话 框 ， 单 击 next 按钮 继续 ， 如 图 14-61 所 示 。 
安装 完成 后 ， 单 击 Finish 按钮 ， 如 图 14-62 所 示 。 
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across all your servers, 


Oe he Pn burien to em pe soap Waare 


“ MySQL Advisors and 125+- 
Best Practice Rules ensure 
securty and performance. 


Alertsand Expert Advice > 

‘onhowto fc problems and Rs 

‘tune for peak performance, MuUSQL Laundh the MySQL Irstance Confiourston Wizsrd 

wee | mt | = a em] em 
图 14-61 企业 服务 器 界面 图 14-62 完成 安装 


划 当 村 半 下 导 习 二 起 由 首 一 主导 喇 习 二 过 
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MySQL 安装 完成 后 ， 还 需要 继续 配置 服务 器 选项 ， 具 体操 作 步 又 如 下 。 

在 上 面 安 装 操作 的 最 后 一 步 ， 选 择 launch the Mysql instance Configuration Wizard 
复 选 框 ， 然 后 单 击 Finish 按钮 ， 进 入 欢迎 设置 数据 库 向 导 的 画面 ， 单 击 Next 按钮 开 
始 设置 ， 如 图 14-63 所 示 。 

ED) 选择 Standard Configuration 标准 组 态 模式 后 ， 单 击 Next 按钮 继续 ， 如 图 14-64 

所 示 。 


rver Instance Configuration Vif 


MySQL serverlnstance Configuration 
Configure the M5Q! Semer 55 sever instance, 


please selec: a configuration ype. 


C Detailed' 


Configuration 
[En hoose th configuration ype to create the optimal server 
setup for this machine, 


Use this only cn machines that do not aleady have a MySQL 
semver installation, This will use ageneralpurpose configurstion 
for the sever that an be tuned manually, 


me | em | 
图 14-63 ”欢迎 设置 数据 库 向 导 图 14-64 选择 设置 类 型 

EEC 打开 设置 服务 器 选项 对 话 框 ， 采 用 默认 的 设置 ， 单 击 Next 按钮 继续 ， 如 图 14-65 
所 示 。 


EEC 打开 安全 设置 选项 对 话 框 ， 输 入 root 用 户 的 密码 后 ， 单 击 Next 按钮 继续 ， 如 
图 14-66 所 示 。 


MySQL Server Instance Configuration 
Configure the MYSQL Server 5.5 serve 


Please set the Windews optione. 
[Instoll hs Windows service 


This fs therecemmended way to run the MySQL 
er on Windows 
Service Names 了 


FE  ， 习 


RE 机 5 
heck thts ophon to Indude the directory cortaining 
the server/ client ececutables inthe Windows PATH 
‘variable so they can be called from the command Iine. 


厂 Greate an Anonymous Account 


hs option wl create an anonymous account onthtssener', 
Please note that this can lead io an insecure system. 


me | ne | me | ees |] emo | 
14-65 ”设置 服务 器 选项 14-66 设置 安全 选项 


ECEDs 打开 准备 执行 对 话 框 ， 并 显示 执行 的 具体 内 容 ， 单 击 Execute 按钮 继续 ， 如 
图 14-67 所 示 。 
ED 出 现下 面 画 面 表 示 组 态 文件 已 成 功 储存 ， 单 击 Finish 按钮 完成 组 态 设置 ， 如 
图 14-68 所 示 。 


局 


第 
rs 
章 | 


Please press [Execute] to start me confguration. 


Press [Finish] to close me Wizard. 


图 14-67 ”准备 执行 界面 图 14-68 配置 完成 界面 


14.4.2 ”案例 6 一 一 phpMyAdmin 的 安装 


溃 当 站 加 | 下 其 避 讲 寺 削 圭一 一 识 采 沼 到 浏 半价 址 


MySQL 数据 库 的 标准 操作 界面 ， 必 须 通 过 命令 提示 符 来 操作 ， 通 过 MySQL 的 指令 来 建 
置 管理 数据 库 内 容 。 如 果 想 要 执行 新 增 、 编 辑 及 删除 数据 库 的 内 容 ， 就 必须 学 习 陌 生 的 SQL 
语法 ， 背 诵 艰深 的 命令 指令 ， 而 后 才能 使 用 MySQL 数据库 ， 如 图 14-69 所 示 。 


-D[] 


图 14-69 命令 提示 符 窗 口 
难道 就 没有 较为 简单 的 软件 可 以 让 用 户 在 类 似 Access 的 操作 环境 下 直接 管理 MySQL 数 


据 库 吗 ? 有， 而 且 这 样 的 软件 还 不 少 ， 其 中 最 常用 的 就 是 phpMyadmin。 

phpMyadmin 软件 是 一 套 Web 界面 的 MySQL 数据 库 管 理 程序 ， 不 仅 功能 完整 、 使 用 方 
便 ， 而 且 只 要 用 户 有 适当 的 权限 ， 就 可 以 在 线 修改 数据 库 的 内 容 ， 让 用 户 更 安全 、 快 速 地 获 
得 数据 库 中 的 数据 。 

用 户 可 以 通过 网 址 (http:/www.phpmyadmin.net/) 获 得 phpMyAdmin 软件 。 下 面 以 安装 
phpMYyAdmin-3.5.3-rcl-all-languages.zip 为 例 进行 讲解 安装 的 方法 ， 操 作 步 又 如 下 。 

ES 右 击 下 载 的 phpMyAdmin 压缩 文件 ， 在 弹出 的 快捷 菜单 中 选择 【解压 文件 】 菜 

单 命令 ， 如 图 14-70 所 示 。 
将 解压 后 的 文件 放置 到 网 站 根 目录 < C:\Apache2.2\htdocs > 之 下 ， 如 图 14-71 所 示 。 
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14-70 ”解压 文件 图 14-71 解压 后 的 文件 


打开 浏览 器 ， 在 网 址 栏 中 输入 “http://localhost/phpMyAdmin/index.php”。 如 果 
运行 结果 如 图 14-72 所 示 ， 则 表示 phpMyAdmin 能 够 被 正确 执行 。 


phpM UAdmIn 
欢迎 使 用 phpMyAdmin 


话 言 Language 
ee 
| 中文 - Chinese simpifed 加 


所 行 
14-72 ”phpMyAdmin 的 运行 界面 
14.5 ”实战 演练 一 一 快速 安装 PHP 集成 环境 : AppServ 2.5 


动态 网 站 的 执行 环境 除了 可 以 通过 本 节 中 介绍 的 方法 进行 创建 外 ， 用 户 还 可 以 使 用 
AppServ 2.5 软件 快速 安装 PHP 集成 环境 ， 这 个 环境 也 适用 动态 网 站 的 运行 。 用 户 可 以 通过 网 
址 http://www.appservnetwork.com/ 获 取 AppServ 软件 。 下 面 以 安装 AppServ 2.5 为 例 进行 讲解 。 

快速 安装 PHP 集成 环境 的 操作 步骤 如 下 。 

双击 < appserv-win32-2.5.10.exe> 开 始 安装 AppServ。 进 入 欢迎 安装 的 画面 ， 单 击 

Next 按钮 开始 安装 ， 如 图 14-73 所 示 。 
打开 许可 协议 窗口 ， 单 击 IAgree 按钮 ， 如 图 14-74 所 示 。 
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图 14-73 ”欢迎 界面 图 14-74 ”许可 证 协议 界面 
EEJep 打开 设置 软件 安装 路 径 的 窗口 ， 建 议 采 用 默认 值 ， 单 击 Next 按钮 继续 安装 ， 如 
图 14-75 所 示 。 
EC 打开 选择 安装 的 程序 窗口 ， 建 议 采 用 默认 值 ， 单 击 Next 按钮 继续 安装 ， 如 
图 14-76 所 示 。 
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Weft mala 2 a 二 
图 14-75 ”选择 安装 路 径 图 14-76 选择 安装 组 件 


EC 弹出 设置 Apache 窗口 ， 设 置 服务 器 的 名 称 和 用 户 的 电子 邮件 ， 单 击 Next 按钮 
继续 安装 ， 如 图 14-77 所 示 。 

ED 打开 设置 MySQL 窗口 ， 输 入 MySQL 服务 器 登录 密码 ， 单 击 Install 按钮 开始 安 
装 ， 如 图 14-78 所 示 。 
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14-77 ”设置 服务 器 的 名 称 和 电子 邮件 
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完成 软件 安装 ， 单 击 Finish 按钮 启动 Apache 及 MySQL， 如 图 14-79 所 示 。 
CO Dana 


Completing the AppServ2.5.10 
Setup Wizard 


Mossy 25 10har be esies on yaurearpair 
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图 14-79 ”安装 完成 

软件 安装 完成 后 ， 还 需要 进行 简单 的 配置 ， 操 作 步 又 如 下 。 

EECJDp 选择 【开始 】 一 【所 有 程序 】 一 Apache HTTP Server 2.5.10 一 Configure Apache 
Server 一 Edit the Apache httpd.conf Configuration File 选项 。 选 择 【 编 辑 】 一 【查找 】 
命令 ， 打开 【查找 】 对 话 框 ， 输 入 “DocumentRoot”， 单 击 【 找 下 一 个 】 按 钮 来 查 
找 要 修改 的 字 串 。 在 设置 文件 中 将 原来 的 设置 前 加 一 个 # 号 转 为 批注 ， 再 增加 下 面 这 
一 栏 的 设置 ， 如 图 14-80 所 示 。 


DocumentRoot “C:/dwphp” 


# documents. By default, all requests are taken from this directory, but 
# symbolic links and aliases may be used to point to other locations. 


DocumentRoot "“C:/Program Files/Apache Groupyapache2.57hpache27htdocs” 
DocumentRoot “C:/dwphp” 


图 14-80 修改 字 串 


EEJPy 设置 完毕 之 后 ， 保 存 并 关闭 这 个 文件 。 选 择 【 开 始 】 一 【所 有 程序 】 一 Apache 


HTTP Server 2.5.10 一 Control Apache Server 一 Restart 选项 ， 重 新 启动 Apache 网 络 服 
务 器 。 


另外 ，AppServ 插件 默认 的 路 径 为 <C:\AppServ>， 而 phpMyAdmin 则 是 安装 在 
<C:\AppServWwwww> 文 件 夹 中 ， 如 图 14-81 所 示 
这 里 将 phpMyAdmin 文件 夹 复 制 到 <C:\dwphp> 中 完成 所 有 的 设置 ， 如 图 14-82 所 示 
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14.6 ” 跟 我 练 练 手 


14.6.1 练习 目标 
能 够 熟练 掌握 本 章节 所 讲 内 容 。 


14.6.2 上 机 练习 


练习 1: 架设 IIS +PHP 的 执行 环境 。 
练习 2: 架设 Apache+PHP 的 执行 环境 。 
练习 3: MySQL 数据 库 的 安装 


14.7 高 手 甜 点 


甜点 1: 架设 IIS+PHP 环境 后 不 支持 MySQL 怎么 办 ? 
在 php.ini 的 配置 文件 中 找到 mysql 后 做 如 下 配置 : 


mysql.default port=3306 
mysql.default host=localhost 
mysql.default user=root 


然后 把 libmysql.dll 复制 到 system32 目录 下 ， 把 php.ini 复制 到 windows 目录 下 ， 最 后 重 
启 计算 机 即 可 。 


甜点 2: Apache 网 站 服务 器 配置 修改 完成 后 不 能 生效 怎么 办 ? 


在 Apache+PHP 的 执行 环境 下 ， 如 果 修 改 了 配置 文件 的 任何 一 项 设置 ， 就 必须 将 Apache 
网 络 同 服 器 重新 启动 才能 生效 。 
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数据 库 是 动态 网 站 的 关键 性 数据 ， 可 以 说 没有 数据 库 就 不 可 能 实现 动态 网 站 的 
包括 MySQL 交 
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15.1 定义 一 个 互动 网 站 


定义 一 个 互动 网 站 是 制作 动态 网 站 的 第 一 步 ， 许 多 初学 者 会 忽略 这 一 点 ， 以 至 由 
Dreamweaver CS6 所 产生 的 代码 无 法 与 服务 器 配合 。 


15.1.1 定义 互动 网 站 的 重要 性 


打开 Dreamweaver CS6 的 第 一 步 不 是 制作 网 页 和 写 程序 ， 而 是 先 定义 所 制作 的 网 站 ， 原 
因 如 下 。 

(1) 将 整个 网 站 视 为 一 个 单位 来 定义 ， 可 以 清楚 地 整理 出 整个 网 站 的 架构 、 文 件 的 配置 
网 页 之 间 的 关联 等 信息 。 

(2) 可 以 在 同一 个 环境 下 一 次 性 定义 多 个 网 站 ， 而 且 各 个 网 站 之 间 不 冲突 。 

(3) 在 Dreamweaver CS6 中 添加 了 一 项 测试 服务 器 的 设置 ， 如 果 事 先 定 义 好 了 网 站 ， 就 
可 以 让 该 网 站 的 网 页 连接 到 测试 服务 器 里 的 数据 库 资源 当中 ， 还 可 以 在 编辑 画面 中 预览 数据 
库 中 的 数据 ， 甚 至 打开 浏览 器 来 运行 。 


15.1.2 ”案例 1 一 一 在 Dreamweaver CS6 中 定义 网 站 

设置 网 站 服务 器 是 所 有 动态 网 页 编写 前 的 第 一 个 操作 ， 因 为 动态 数据 必须 要 通过 网 站 服 
务 器 的 服务 才能 运行 。 许 多 人 都 会 忽略 这 个 操作 ， 以 至 程序 无 法 执行 或 出 错 。 

1. 整理 制作 范例 的 网 站 信息 


在 开始 操作 之 前 ， 请 先 养 成 一 个 习惯 一 一 整理 制作 范例 的 网 站 信息 。 具 体 做 法 是 :将 所 
要 制作 的 网 站 信息 以 表格 的 方式 列 出 ， 再 按 表 来 实施 ， 这 样 不 仅 可 以 让 网 站 数据 井井有条 ， 
在 维护 工作 时 也 能 够 更 快 地 掌握 网 站 情况 。 

如 表 15-1 所 示 为 整理 出 来 的 网 站 信息 。 


表 15-1 网 站 信息 表 


信息 名 称 内 容 

网 站 名 称 DWMXPHP 测试 网 站 
本 机 服务 器 主 文件 夹 C:\Apache?2.2\htdocs 
程序 使 用 文件 夹 C:\Apache?2.2\htdocs 
程序 测试 网 址 http://localhost/ 

2. 定义 新 网 站 

整理 好 网 站 的 信息 后 ， 就 可 以 正式 进入 Dreamweaver CS6 进行 网 站 编辑 了 。 具 体操 作 步 

又 如 下 。 


ED 在 Dreamweaver CS6 的 编辑 界面 中 ， 选 择 【站 点 】 一 【管理 站 点 】 命 令 ， 如 
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第 上 
图 15-1 所 示 。 回 
区 TY 在 【管理 站 点 】 对 话 框 中 ， 选 择 【 新 建站 点 】 命 令 进入 【站 点 】 对 话 框 ， 如 齐 
图 15-2 所 示 。 者 
Sn 另外 ， 用 户 也 可 以 直接 选择 【站 点 〗 一 【新 建站 点 】 命 令 进入 【站 点 】〗 对 话 到 
N 框 ， 如 图 15-3 所 示 。 mn 
的 
ND wo se so RW 桥 

| 管理 站 点 中 | 

管理 站 点 员 定 
义 
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图 15-1 选择 【管理 站 点 】 命 令 图 15-2 【管理 站 点 】 对 话 框 15-3 选择 【新 建站 点 】 命 令 ”三 
CD 
区 于 BY 打开 站 点 设置 对 话 框 ， 输 入 站 点 名 称 为 “DWMXPHP 测试 网 站 ”， 选 择 木 地 站 吕 
点 文件 夹 位 置 为 C:\Apache2.2\htdocs， 如 图 15-4 所 示 。 3 
库 


E> 在 企 全 列表 中 汉 尝 【服务 器 】 选 项 卡 ， 单 击 + 按钮 ， 如 图 15-5 所 示 。 
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图 15-4 设置 站 点 的 名 称 与 存放 位 置 图 15-5 【服务 器 】 对 话 框 

于 BY 在 基本 标签 框 中 输入 服务 器 名 称 “DWMXPHP 测试 网 站 ”， 选 择 连接 方法 为 

【本 地 /网 络 】， 选 择 服务 器 文件 夹 为 C:\Apache2.2， 如 图 15-6 所 示 。 
em 统一 资源 定位 器 (Uniform Resource Locatol，URL) 是 一 种 网 络 上 的 定位 系统 ， 
”可 称 为 网 站 。Host 指 Intemet 连接 的 电脑 ， 至 少 有 一 个 固定 的 IP 地 址 。Localhost 
草本 地 端的 主机 ， 也 就 是 用 户 自 己 的 电脑 。 

ED 选择 【高 级 】 选 项 卡 ， 设 置 测 试 服务 器 的 服务 器 模型 为 PHP MySQL， 最 后 单 击 

【保存 】 按 钮 保存 站 点 设置 ， 如 图 15-7 所 示 。 


其 他 可 选 的 服务 器 模型 有 ASP VBScript、ASP JavaScript、ASP. NET (C#、 
i 生 VB )、ColdFusion、JSP 等 。 
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服务 蝇 名 称 :[>wnPrciixFi | 


EE | 
二 和 和 吕 


连接 方法 : [地 地 [网络 I Ea 
三 一 口 保 时 自动 文件 上 传 服 务 器 
服务 台 文 上 关 : [cvescezz | 加 口中 者 立 件 于 出 功 根 
Web URL: 


本 打开 文件 之 半 归 出 
bs 
志 于 即 汪 雪 址 ; 


i 
Bm [em | 
7 | mm | 
15-6 【基本 】 选 项 卡 15-7 【高 级 】 选 项 卡 


EC 返回 到 Dreamweaver CS6 的 编辑 界面 中 ， 在 【文件 】 面 板 上 会 显示 所 设置 的 结 
果 ， 如 图 15-8 所 示 。 


ECERB 如 果 想 要 修改 已 经 设置 好 的 网 站 ， 可 以 选择 【站 点 】 一 【站 点 管理 】 命 令 ， 在 
打开 的 对 话 框 中 单 击 “ 铅 笔 ” 按 钮 ， 再 次 编辑 站 点 的 属性 ， 如 图 15-9 所 示 。 


Es 
EE 
EE 
[=| [em 
图 15-8 Dreamweaver CS6 的 编辑 界面 图 15-9 【管理 站 点 】 对 话 框 


3. 测试 设置 结果 


完成 了 以 上 的 设置 后 ， 需 要 制作 一 个 简单 的 网 页 来 测试 一 下 。 具 体操 作 步 骤 如 下 。 

ED 在 【文件 】 面 板 中 添加 一 个 新 文件 并 打开 该 文件 进行 编辑 。 要 添加 新 文件 ， 就 
要 选中 该 网 站 文件 夹 后 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【新 建文 件 】 命 令 ， 如 图 15-10 
所 示 。 


EEJPp 双击 <testphp> 打 开 新 文件 ， 在 页 面 上 添加 一 些 文字 ， 如 图 15-11 所 示 。 


加 DYWKPHP 唱 试 网 站 况 || 丰 地 视图 司 
EW- IE RA a Dw 


©. 由 本 瑟 允 C 硬 : 


sr CS6!!!</ 


me 日 
1 个 本 寺 须 目 衫 生意 共 SEE 


Hi,Dreamweaver CS6!!! 


图 15-10 新 建文 件 15-11 ”添加 网 页 内 容 
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ES 添加 完成 后 直接 按 F12 键 打开 浏览 器 来 预览 ， 可 以 看 到 页 面 执行 的 结果 ， 如 
图 15-12 所 示 。 


动态 一 试 页 面 - Yindows Internet Explerer -olxl| 
Go. lolslxls" le 国 


文件 中) 狂 竹 G) 查看 W) 收藏 天 ) 工具 思 。 帮助 op 


PMR Bsaan 男 


Hi, Dreamweaver CS6!!! 


图 15-12 网 页 预览 结果 
3 不 过 这 样 似乎 与 预览 静态 网 页 时 没有 什么 区 别 。 仔 细 看 看 这 个 网 页 所 执行 的 网 
证 。 址 ， 它 不 再 是 以 磁盘 路 径 来 显示 ， 而 是 以 刚才 设置 的 URL 前 级 http://localhost/ 再 
加 上 文件 名 来 显示 的 ， 这 表示 网 页 是 在 服务 器 的 环境 中 运行 。 


ES 仅仅 这 样 还 不 能 完全 显示 出 互动 网 站 服务 器 的 优势 ， 因 此 还 需 再 加 入 一 行 代码 
来 测试 程序 执行 的 能 力 。 首 先 回 到 Dreamweaver CS6， 在 刚才 的 代码 后 再 添加 一 
行 ， 执 行 下 列 操 作 ， 如 图 15-13 所 示 。 


Sn 图 15-13 中 的 代码 中 的 date() 是 一 个 PHP 的 时 间 函 数 ， 其 中 的 参数 可 设置 显 
外 示 格 式 ， 可 以 显示 目前 服务 器 的 时 间 ， 而 <?php echo..….?> 会 将 函数 所 取得 的 结果 送 
到 前 端 浏览 器 来 显示 。 所 以 在 执行 这 个 页 面 时 ， 应 该 会 在 网 页 上 显示 出 服务 器 的 
当前 时 间 。 
ED 按 Ctrlts 组 合 键 保存 文件 后 ， 再 按 F12 键 打开 浏览 器 进行 预览 ， 果 然 在 刚才 的 


网 页 下 方 出 现 了 当前 时 间 ， 这 就 表示 了 我 们 的 设置 确实 可 用 ，Dreamweaver CS6 的 
服务 器 环境 也 就 此 开始 了 ， 如 图 15-14 所 示 。 
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Dw 者 1 和 - 
叉 伞 四 换 榈 全 可 着 人 策 入 (i 震 履 作 ) 箱 式 @0) 全 令 (C) 区 点 名 官 鸣 总 胁 00 


-| 
es sal) le 
RIA MM 

类 。 大 到 出 < 二 


HiDreamweaver CS6!'!! 
筷 在 时 间 为 邑 Hi, Dreamweaver CS6!!! 


检 D3 各 | 关口 


现在 时 间 为 ，2013-05-25 01:54:36 


他 
二 


图 15-13 ”添加 动态 代码 图 15-14 动态 网 页 预览 结果 


15.2 MySQL 数据 库 的 使 用 


要 使 一 个 网 站 达到 互动 效果 ， 不 是 让 网 页 充满 了 动画 和 音乐 ， 而 是 当 浏 览 者 对 网 页 提出 
要 求 时 ， 网 站 能 做 出 相应 的 响应 结果 。 而 要 实现 这 样 的 效果 ， 通 常 需 措 配 数据 库 的 使 用 ， 让 


. 
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网 页 读 出 保存 在 数据 库 中 的 数据 。 


15.2.1 数据 库 的 原理 


Dreamweaver CS6 可 连接 的 数据 库 类 型 很 多 ， 从 dBase 到 目前 市 场 上 的 主流 数据 库 
Access、SQLServer、MySQL、Oracle 等 都 能 使 用 。 在 Dreamweaver CS6 开发 PHP 互动 网 站 
的 环境 下 所 搭配 的 数据 库 为 MySQL。 在 使 用 数据 库 之 前 ， 必 须 对 数据 库 的 构造 及 运行 方式 有 
所 了 解 ， 才 能 有 效 地 制作 互动 程序 。 

数据 库 (Database) 是 一 些 相关 数据 的 集合 ， 我 们 可 以 通过 一 定 的 原则 与 方法 添加 、 编 辑 和 
删除 数据 的 内 容 ， 进 而 对 所 有 数据 进行 搜索 、 分 析 及 对 比 ， 取 得 可 用 的 信息 ， 产 生 所 需 的 
结果 。 

一 个 数据 库 不 是 只 能 保存 一 种 简单 的 数据 ， 它 可 以 将 不 同 的 数据 内 容 保存 在 同一 个 数据 
库 中 。 比 如 ， 在 进 销 存 管理 系统 中 ， 可 以 同时 将 货物 数据 与 厂商 数据 保存 在 同一 个 数据 库 文 
件 中 ， 归 类 及 管理 时 用 起 来 都 很 方便 。 

若 不 同类 的 数据 之 间 有 关联 还 可 以 彼此 使 用 。 比 如 ， 可 以 查询 出 某 种 产品 的 名 称 、 规 格 
及 价格 ， 而 且 可 以 利用 其 厂商 编号 查询 到 厂商 名 称 及 联系 电话 。 我 们 称 保存 在 数据 库 中 不 同 
类 别 的 记录 集合 为 数据 表 (Table)。 一 个 数据 库 中 可 以 保存 多 个 数据 表 ， 而 每 个 数据 表 之 间 并 
不 是 互 不 相干 的 ， 如 果 有 关联 的 话 ， 它 们 是 可 以 协同 作业 彼此 合作 的 ， 如 图 15-15 所 示 。 


一 个 数据 库 可 以 保存 多 个 不 
同 的 数据 表 ， 每 个 数据 表 之 


间 因 为 共同 拥 同 字段 而 可 以 
彼此 相关 、 协 同 作 业 ， 这 就 
是 所 谓 的 “关系 式 数据 库 ” 


图 15-15 ”数据库 示意 图 
每 一 个 数据 表 都 由 一 个 个 字段 组 合 起 来 。 比 如 ， 在 产品 数据 表 中 ， 可 能 会 有 产品 编号 、 
产品 名 称 和 产品 价格 等 字段 ， 只 要 按照 一 个 个 字段 的 设置 输入 数据 ， 即 可 完成 一 个 完整 的 数 
据 库 ， 如 图 15-16 所 示 。 


Es ] 产品 编号 | 产品 名 称 | 产品 价格 
产品 a00001 了 90 


数据 表 a00002 ¥150 


15-16 ”数据 表示 意图 


这 里 有 一 个 很 重要 的 概念 ， 一 般 人 认为 数据 库 是 保存 数据 的 地 方 ， 这 是 不 对 的 。 其 实数 
据 表 才 是 真正 保存 数据 的 地 方 ， 数 据 库 是 放置 数据 表 的 场所 ， 如 图 15-17 所 示 。 


有 正确 的 数据 库 概念 ， 在 编写 
程序 时 才 不 会 感到 困扰 


原来 数据 库 的 组 成 与 结构 是 这 
个 样子 


15-17 ”数据 存放 位 置 
15.2.2 ”案例 2 一 一 数据 库 的 建立 


由 于 MySQL 数据 库 的 指令 都 是 在 命令 提示 符 界面 中 使 用 的 ， 这 对 于 初学 者 来 说 比较 
难 。 对 此 ， 本 书 将 采用 phpMyAdmin 管理 程序 来 执行 ， 以 便 能 有 更 简易 的 操作 环境 与 使 用 
效果 。 


1. 启动 phpMyAdmin 管理 程序 


phpMyAdmin 是 一 套 使 用 PHP 程序 语言 开发 的 管理 程序 ， 它 采用 网 页 形式 的 管理 界面 。 
如 果 要 正确 执行 这 个 管理 程序 ， 就 必须 在 网 站 服务 器 上 安装 PHP 与 MySQL 数据 库 。 

在 第 14 章 中 ， 将 phpMyAdmin 管理 程序 下 载 后 的 压缩 文件 解压 在 本 机 服务 器 主 文件 夹 
中 ， 路 径 是 <C:\Apache2.2\htdocs\phpMyAdmin>。 如 果 要 启动 pppMyAdmin 管理 程序 ， 只 要 打 
开 浏览 器 ， 输 入 网 址 “http:WlocalhostphpMyAdmin/index.php” 即 可 启动 ， 启 动 后 的 界面 如 
图 15-18 所 示 。 


phpMyAdmin 
会 一 名 日 口 @ | 局 数 据 床 有利 Sa 和 状态 用户 也 号 出 | 要 多 


[Aw | EE 数据 库 服 务 器 
5 information_schema | 他 个 改定 码 1 canosva 
号 服务 器 连接 校对 
| | we 
3 performance_schema - — * 软件 版 本 . 5528 
本 lest MySQL Community 
Eee Server (GPL) 
外 观 设 置 协议 乒 本 -10 
| “用户: roatBlocalhost 
| 六 语言 -Language @ * 服务 器 字符 集 UTF-8 
中 文 -Chinese simpifed 。 国 pe 
全 主题 pmanomme 国 | 
* 字 |97% 国 网 站 服务 器 
更 多 设置 * Apache/2 222 
(Win32) PHPS 3.17 
“数据 库 客户 江上 本 


图 15-18 ” phpMyAdmin 的 工作 界面 
2. 创建 数据 库 
在 MySQL 数据 库 安装 完毕 之 后 ， 会 有 4 个 内 置 数 据 库 : mysql、information_schema、 
performance_schema 及 test 产生 。 
e@ mysql 数据 库 : 是 系统 数据 库 ， 在 24 个 数据 表 中 保存 了 整个 数据 库 的 系统 设置 ， 十 
分 重要 。 
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e ”information_schema 数据 库 : 包括 数据 库 系 统 有 什么 库 ， 有 什么 表 ， 有 什么 字典 ， 有 
什么 存储 过 程 等 所 有 对 象 信息 和 进程 访问 、 状 态 信息 。 

@ performance_schema 数据 库 : 新 增 一 个 存储 引擎 ， 主 要 用 于 收集 数据 库 服 务 器 性 能 
参数 。 包 括 锁 、 互 斥 变量 、 文 件 信息 ; 保存 历史 的 事件 汇总 信息 ， 为 提供 MySQL 
服务 器 性 能 做 出 详细 的 判断 ， 对 于 新 增 和 删除 监控 事件 点 都 非常 容易 ， 并 可 以 随意 
改变 mysql 服务 器 的 监控 周期 。 

@ test 数据 库 : 是 让 用 户 测试 用 的 数据 库 ， 可 以 在 里 面 添加 数据 表 来 测试 。MySQL 内 
置 的 4 个 数据 库 可 在 菜单 中 看 到 ， 如 图 15-19 所 示 。 


phpMyAdmin 
会 到 同人 日 所 结构 | 司 SQL 3 搜 和 | 口 吉 间 | 号 号 出 | 要 多 


[人 没有 在 数据 库 中 找到 表 


图 15-19 test 的 测试 界面 


py performance_schema 是 MySQL5.5 新 增 的 一 个 功能 ， 可 以 帮助 DBA 了 解 性 能 
A 降低 的 原因 。mysql、information schema 为 关键 库 ， 不 能 被 删除 ， 否 则 数据 库 系 
统 不 再 可 用 。 


下 面 以 在 MySQL 中 创建 一 个 学 校 班级 数据 库 class 为 例 ， 介 绍 如 何 添加 一 个 同学 通讯 录 
的 数据 表 classmates， 如 图 15-20 所 示 ， 在 文本 框 中 输入 要 创建 数据 库 的 名 称 class， 再 单 击 
【创建 】 按 钮 即 可 。 


引 数据 库 司 SQL 最 状态 zs 用 户 局 导出 vv 更 多 


数据 库 


包 新 建 数 据 库 司 
class 整理 司 创建 


15-20 ”新 建 学 校 班级 数据 库 


en 在 一 个 数据 库 中 可 以 保存 多 个 数据 表 ， 以 本 页 所 举 的 范例 来 说 明 : 一 个 班级 
Ea 的 数据 库 中 ， 可 以 包含 同学 通讯 录 数 据 表 、 教 师 通 讯 录 数 据 表 、 期 中 考试 分 数 数 
据 表 等 。 因 此 ， 这 里 需要 创建 数据 库 class， 也 需要 创建 数据 表 classmates。 


3. 认识 数据 表 的 字段 
在 添加 数据 表 之 前 ， 首 先 要 规划 数据 表 中 要 使 用 的 字段 。 其 中 设置 数据 字段 的 类 型 非常 


. 
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hh 


日 


和 要， 使 用 正确 的 数据 类 型 才能 正确 地 保存 和 应 用 数据 。 

在 MySQL 数据 表 中 常用 的 字段 数据 类 型 可 以 分 为 以 下 3 个 类 别 。 

(1) 数值 类 型 。 

该 类 型 用 来 保存 、 计 算 的 数值 数据 字段 ， 比 如 ， 会 员 编号 或 是 产品 价格 等 。 在 MySQL 
的 数值 字段 按照 保存 的 数据 所 需 空间 的 大 小 有 以 下 区 别 ， 如 表 15-2 所 示 。 


表 15-2 数值 类 型 表 
数值 数据 类 型 保存 空间 数据 的 表示 范围 
TINYINT lbyte signed-128~127 unsigned 0~255 
SMALLINT 2bytes Signed-32768 一 32767 unsigned 0~65535 
MEDIUMINT 3bytes Signed-8388608 一 8388607 unsigned 0 一 16777215 


INT 4bytes Signed-2147483648 一 2147483647 unsigned 0 一 4294967295 
注 : signed 表示 其 数值 数据 范围 可 能 有 负 值 ，unsigned 表示 其 数值 数据 均 为 正 值 
(2) 日 期 及 时 间 类 型 。 
该 类 型 用 来 保存 日 期 或 时 间 类 型 的 数据 ， 比 如 ， 会 员 生 日 、 留 言 时 间 等 。MySQL 中 的 日 


期 及 时 间 类 型 有 以 下 几 种 格式 ， 如 表 15-3 一 表 15-5 所 示 。 


表 15-3 日 期 数据 类 型 表 


日 期 数据 类 型 

数据 类 型 名 称 DATE 

存储 空间 3 byte, 

数据 的 表示 范围 '1000-01-01'~'9999-12-31' 

数据 格式 "YYYY-MM-DD" "YY-MM-DD" "YYYYMMDD" "YYMMDD" 


YYYYMMDD YYMMDD 
注 : 在 数据 格式 中 ， 若 没有 加 上 引号 为 数值 的 表示 格式 ， 前 后 加 上 引号 为 字符 串 的 表示 格式 


表 15-4 时间 数据 类 型 表 


时 间 数 据 类 型 

数据 类 型 名 称 TIME 

存储 空间 3 byte 

数据 的 表示 范围 | -838:59:59'~'838:59:59' 

数据 格式 Mhh:mm:ssN "hhmmss" hhmmss 


注 : 在 数据 格式 中 ， 若 没有 加 上 引号 为 数值 的 表示 格式 ， 前 后 加 上 引号 为 字符 串 的 表示 格式 
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表 15-5 日 期 与 时 间 数 据 类 型 表 


日 期 与 时 间 数 据 类 型 

数据 类 型 名 称 DATETIME 

存储 空间 | sbyte 

数据 的 表示 范围 "1000-01-01 00:00:00' 一 '9999-12-31 23:59:59' 


"YYYY-MM-DD hh:mm:ss” "YY-MM-DD hhmm:ss" "YYYYMMDDhhmmss" 
"YYMMDDhhmmss" YYYYMMDDhhmmss YYMMDDhhmmss 

注 : 在 数据 格式 中 ， 若 没有 加 上 引号 为 数值 的 表示 格式 ， 前 后 加 上 引号 为 字符 串 的 表示 格式 

(3) 文本 类 型 。 

可 用 来 保存 文本 类 型 的 数据 ， 如 学 生 姓 名 、 地 址 等 。 在 MySQL 中 文本 类 型 数据 有 下 列 
几 种 格式 ， 如 表 15-6 所 示 。 


数据 格式 


表 15-6 文本 数据 类 型 表 


保存 空间 
必须 指定 字段 大 小 ， 数 据 不 足 时 以 空白 字符 填 满 
VARCHARM 必须 指定 字段 大 小 ， 以 实际 填 入 的 数据 内 容 来 存储 


最 多 可 保存 25 535 bytes 不 需 指定 字段 大 小 


在 设置 数据 表 时 ， 除 了 要 根据 不 同性 质 的 数据 选择 适合 的 字段 类 型 之 外 ， 有 些 重要 的 字 
段 特性 定义 也 能 在 不 同 的 类 型 字段 中 发 挥 其 功能 ， 常 用 的 设置 如 下 。 


表 15-7 ”特殊 字段 数据 类 型 表 


特性 定义 名 称 适用 类 型 定义 内 容 
SIGNED、UNSIGNED | 数值 类 型 | 定义 数值 数据 中 是 否 允许 有 负 值 ，SIGNED 表示 允许 


AUTOJNCREMENT 自动 编号 ， 由 0 开始 以 1 来 累加 

BINARY 保存 的 字符 有 大 小 写 区 别 

NULL、 NOTNULL 是 否 允许 在 字段 中 不 填 入 数据 

默认 值 若是 字段 中 没有 数据 ， 即 以 默认 值 填 充 

天 好 主 索引 ， 每 个 数据 表 中 只 能 允许 一 个 主键 列 ， 而 且 该 栏 数据 不 


能 重复 ， 加 强 数据 表 的 检索 功能 


7 提示 如 果 想 要 了 解 更 多 关于 MySQL 其 他 类 型 的 数据 字段 及 详细 数据 ， 可 参考 
卸 MySQL 的 使 用 手册 或 MySQL 的 官方 网 站 http://www. mysql.com。 


4. 添加 数据 表 
如 表 15-8 所 示 是 要 添加 一 个 同学 通讯 录 数 据 表 的 字段 的 规划 。 


四 
、 2 366 


表 15-8 同学 通讯 录 数 据 表 


className VARCHAR(20) 


ClassSex 


classBirthda 


classEmail VARCHAR(100) 


classPhone VARCHAR(100) 


classAddress 


其 中 有 以 下 几 个 要 注意 的 地 方 。 


座 号 (classID) 为 这 个 数据 表 的 主 索 引 字段 ， 基 本 上 它 是 数值 类 型 保存 的 数据 ， 因 为 一 
般 座 号 不 会 超过 两 位 数 ， 也 不 可 能 为 负数 ， 所 以 设置 它 的 字段 类 型 为 TINYINT(2)， 
属性 为 UNSIGNED。 为 使 在 添加 数据 时 ， 数 据 库 能 自动 为 学 生 编号 ， 所 以 在 字段 上 
加 入 了 auto_increment 自动 编号 的 特性 。 

姓名 (className) 属 于 文本 字段 ， 一 般 不 会 超过 10 个 中 文字 ， 也 就 是 不 会 超过 20 
Bytes， 所 以 这 里 设置 为 VARCHAR(20)。 

性 别 (classSex) 属 于 文本 字段 ， 因 为 只 保存 一 个 中 文字 ( 男 或 女 )， 所 以 设置 为 
CHAR(2)， 默 认 值 为 “ 女 ”。 

生日 (classBirthday) 属 于 日 期 时 间 格 式 ， 设 置 为 DATE。 

电子 邮件 (classEmail)、 电 话 (classPhone) 及 住址 (classAddress) 都 是 文本 字段 ， 设 置 为 
VARCHAR(100)， 最 多 可 保存 100 个 英文 字符 ，50 个 中 文字 。 因 为 每 个 人 不 一 定 有 
这 些 数据 ， 所 以 这 3 个 字段 允许 为 空 。 


接 下 来 要 回 到 phpMyAdmin 的 管理 界面 ， 为 MySQL 中 的 class 数据 库 添 加 数据 表 。 选 择 
创建 的 class 数据 库 ， 输 入 添加 的 数据 表 名 称 和 字段 数 ， 然 后 单 击 【执行 】 按 钮 ， 如 图 15-21 


所 示 。 


phpMyAdmin 


Py @ | 站 结构 各 SQL 搜索 查询 “局 导出 “~ 更 多 


表 - 控 作 行 数 已 关 型 。” 整 时 大 小 多余 
保 过 使 所 的 夫 ) ”加 | _0 张 表 总 计 9 InnoDB gb2312_chinese_cl 0 字 节 0 字 节 
cass 司 员 4 。 全 关 / 全 不 乱 适中 项 。 
数据 诛 中 没有 表 。 
] 新 建站 据 表 全 打印 珊 览 机 狼 声 宁 类 
记 新 奸 示 据 直 
名 字 - dassmates 字 腑 数 : | 了 


执行 


图 15-21 新 建 数 据 表 


请 按照 前 面 规划 的 数据 表 内 容 ， 为 数据 表 添加 字段 ， 如 图 15-22 所 示 。 
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phpMyAdmin 
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15-22 ”添加 数据 表 字 段 


在 操作 上 述 设置 的 过 程 中 ， 需 要 注意 以 下 4 点。 

(1) 设置 ClassID 为 整数 。 

(2) 设置 ClassID 为 自动 编号 。 

(3) 设置 ClassID 为 主键 列 。 

(4) 人 允许 classEmail、classPhoned、classAddress 为 空位 。 

~ 在 设置 完毕 之 后 ， 单 击 【 保 存 】 按 钮 ， 在 打开 的 界面 中 可 以 查看 完成 的 classmates 数据 
Se 表 ， 如 图 15-23 所 示 。 


phpMyAdmin 


下 PE 的 司 SQL 本 于 新 入 国 呈 出 局 导 入 因 保 作 5 和 


全 B05 
口 村 要 员 进 坊 鱼 【 久 侣 【如 标 SQL [让 理 
地 折合 用 的 表 )-- 天 
一 - 站 | 天 驶 理 哲 性 。 空 对 认 关外 最 作 
口 1 dem mint2) wee 本 三 AUTO INCREMENT i% © MF ~ S 
eosomatoe 口 z clomliame 。 mrchwfanl 22cmese et 亚 到 Et DN 
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口 4 clasm8irthday date 否 00000000 2 dd 
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口 7 desahddross varchar (100) gh2312 chinooo ci 7 Hk OM ES 


法 /全 不 迁 二 站 大 ， 司 浏 这 扩 任 才 司 凤 fF 疙 主 庆 而 志 一 看 字 5 
15-23 classmates 数据 表 
5. 添加 数据 


添加 数据 表 后 ， 还 需要 添加 具体 的 数据 ， 具 体 的 操作 步骤 如 下 。 
本 TY 远 择 classmates 数据 表 ， 单 击 菜单 上 的 【插入 】 链 接 ， 如 图 15-24 所 示 。 


phpMyAdmin 9] 
目 六 SS 怠 续 和 加 SQL 所 近 未 革新 入 局 导出 
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15-24 ” 单 击 【插入 】 链 接 


EC 依照 字段 的 顺序 ， 将 对 应 的 数值 依次 输入 ， 单 击 【执行 】 按 钮 ， 即 可 插入 数 
据 。 选 择 【 继 续 插入 1 行 】 选 项 即 可 继续 添加 数据 ， 如 图 15-25 所 示 。 
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图 15-25 插入 数据 中 
EERS9 按照 图 15-26 所 示 的 数据 ， 重 复 执 行 步骤 1 一 2 的 操作 ， 将 数据 输入 到 数据 表 中 。 基 
classID className classSex classBirthday dlassEmail dlassPhone dlassAddress 库 
1 杨 小 后 男 1966-02-11 。 pung@163.cm 010-76786545 ”北京 市 西 四 大 街 45 号 
2 金晶 匿 1965-10-07 jinjng®126.com 022-34534563 ”温州 市 新 华 大 街 30 号 
3 偶 珠 谈 1966-12-.7 nimian@126com 034-32445456 ”次 京 市 夫子 庙 9 号 
4 林 小 红 女 19e2-09-29 linxiachong9126.com 029-45435634 天津 市 傈 开 区 红旗 街 49 号 
5 毛 受 国 另 1979-12-30 ”maoalguo@1l26.com 0445-32344634 上 海 市 爱民 路 43 号 
6 历 小 田 男 1968-03-07 lxiaotian@126.com ”0932-65645635 北京 市 玉泉 路 54 号 
7 宁 巡 男 1984-03-2 nnghur®l26.com 010-84737273 ”北京 市 丰台 区 598 号 
日 蓝 小 天 另 1976-05-30 lanxiaotian@126.com 。 0554-67438362 广东 市 中 山路 553 号 
9 蒋 饥 华 田 1967-01-15 yayunaiwoG@yahoo com 021-88888885 ”上 海 市 中 山路 68 号 
10 安 小 民 。 勇 1949-10-01 。 anxiacmingB126.com 022-37453453 ”重头 市 红 兰 路 33 号 


图 15-26 输入 的 数据 


15.3 ”在 网 页 中 使 用 MySQL 数据 库 


一 个 互动 网 页 的 呈现 ， 实 际 上 就 是 将 数据 库 整 理 的 结果 显示 在 网 页 上 。 所 以 ， 如 何在 网 
页 中 连接 到 数据 库 ， 并 读 出 数据 显示 ， 甚 至 选择 数据 来 更 改 ， 是 使 用 MySQL 数据 库 的 一 个 
重点 。 


15.3.1 网 页 取得 数据 库 的 原理 


PHP 是 一 种 网 络 程序 语言 ， 它 并 不 是 MySQL 数据 库 的 一 部 分 ， 所 以 PHP 的 研发 单位 就 
制作 了 一 套 与 MySQL 沟通 的 函数 。SQL(Structured Query Language， 结 构 化 查询 语言 ) 就 是 这 
些 函 数 与 MySQL 数据 库 连 接 时 所 运用 的 方法 与 准则 。 
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几乎 所 有 的 关系 式 数据 库 所 采用 的 都 是 SQL 语法 ， 而 MySQL 就 是 使 用 它 来 定义 数据 库 
结构 、 指 定数 据 库 表格 与 字段 的 类 型 与 长 度 、 添 加 数据 、 修 改 数据 、 删 除数 据 、 查 询 数据 ， 
以 及 建立 各 种 复杂 的 表格 关联 。 

所 以 ， 当 网 页 中 需要 取得 MySQL 的 数据 时 ， 它 可 以 应 用 PHP 中 MySQL 的 程序 函数 ， 
通过 SQL 的 语法 来 与 MySQL 数据 库 沟通 。 当 MySQL 数据 库 接收 到 PHP 程序 传递 过 来 的 
SQL 语法 后 ， 再 根据 指定 的 内 容 完成 所 叙述 的 工作 再 返回 到 网 页 中 。PHP 与 MySQL 之 间 的 
运行 方式 如 图 15-27 所 示 。 


时] 
PHP 


网 页 应 用 程序 


\ 


图 15-27 PHP 与 MySQL 之 间 的 运行 方式 


根据 这 个 原理 ， 一 个 PHP 程序 开发 人 员 只 要 在 使 用 数据 库 时 遵循 下 列 步骤 ， 即 可 顺利 获 
得 数据 库 中 的 资源 。 

(1) 建立 连接 (Connection) 对 象 来 设置 数据 来 源 。 

(2) 建立 记录 集 (Recordset) 对 象 并 进行 相关 的 记录 操作 。 

(3) 关闭 数据 库 连接 并 清除 所 有 对 象 。 


15.3.2 ”案例 3 一 一 建立 MySQL 数据库 连 接 


在 Dreamweaver CS6 中 ， 连 接 数据 库 十 分 轻松 简单 。 下 面 通过 实例 来 说 明 如 何 使 用 
Dreamweaver CS6 建立 数据 库 连 接 。 
国际 在 Dreamweaver CS6 中 ， 选 择 所 定义 的 网 站 “DWPHP 测试 网 站 ”， 新 建 一 个 文 
件 showdataphp， 并 打开 此 文件 ， 如 图 15-28 所 示 。 
EEJPp 选择 【窗口 】 一 【数据 库 】 命 令 ， 进 入 【数据 库 】 面 板 。 单 击 + 按 钮 ， 选 择 
【MySQL 连接 】 命 令 进入 设置 对 话 框 ， 如 图 15-29 所 示 。 
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图 15-28 新 建文 件 15-29 ”连接 数据 库 
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本 TE> 进入 【MySQL 连接 】 对 话 框 后 ， 输 入 自 定义 的 连接 名 称 “connClass”， 输 入 
mysql 服务 器 的 用 户 名 和 密码 ， 单 击 【 选 取 】 按 钮 来 选取 连接 的 数据 库 ， 如 图 15-30 
所 示 。 

ECG 打开 【选取 数据 库 】 对 话 框 ， 选 择 class 数据 库 ， 单 击 【 确 定 】 按 钮 ， 如 图 15-31 
所 示 。 


kk 


习 
连 拉 名称 Fomclass 确定 


15-30 【MySQL 连接 】 对 话 框 15-31 【选取 数据 库 】 对 话 框 


ED 返回 到 原 界 面 后 ， 单 击 【 测 试 】 按 钮 ， 提 示 成 功 创建 连接 脚本 ， 单 击 【 确 定 】 
按钮 ， 如 图 15-32 所 示 。 

回 到 Dreamweaver CS6 后 ， 可 以 打开 【数据 库 】 面 板 。class 数据 库 的 classmates 
数据 表 在 连接 设置 后 已 经 读 入 Dreamweaver CS6 了 ， 如 图 15-33 所 示 。 


连接 名 称 : onnclass 
MyS9L 服务 器 : Focalihost 


8 classBirthday (date 必需 的 ) 
Bh classEngil (varchar 100) 
988 classID (tinyint 2 必需 的 ) 
classHane (varchar 20 必需 的 ) 
Bh classPhone (varchar 100) 
双 olasssex (char 2 必需 的 ) 

由 - 辐 视图 

长 预 让 过 程 


图 15-32 ”连接 数据 库 15-33 【数据 库 】 面 板 


| 权限 概念 的 实现 是 MySQL 数据 库 的 特色 之 一 。 在 设置 连接 时 ，Dreamweaver 

汇 ”CS6 不 时 会 提醒 为 数据 库 管 理 员 加 上 密码 ， 目 的 是 要 让 权限 管理 加 上 最 后 一 道 

锁 。MySQL 数据 库 是 默认 不 为 管理 员 账 户 加 密码 的 ， 所 以 必须 在 MySQL 数据 库 
调整 后 再 回 到 Dreamweaver CS6 时 修改 设置 ， 在 第 15.3.3 节 中 会 对 此 重点 说 明 。 


15.3.3 ”案例 4 一 一 绑 定 记 录 集 


在 第 15.3.1 节 中 ， 曾 讲 过 网 页 若 要 用 到 数据 库 中 的 资源 ， 在 建立 连接 后 ， 必 须 建立 记录 
集 才能 进行 相关 的 记录 操作 。 在 这 一 节 中 ， 我 们 先 简单 说 明 如 何在 建立 连接 之 后 添加 记 
录 集 。 
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所 谓 记录 集 ， 就 是 将 数据 库 中 的 数据 表 按 照 要 求 来 得 选 、 排 序 整理 出 来 的 数据 ， 可 在 


【 绑 定 】 面 板 中 进行 操作 。 
EEIDp 切换 到 【数据 库 】-~【 绑 定 】 面 板 ， 单 击 + 按钮 ， 选 择 【记录 集 ( 查 询 )】 命 令 ， 


如 图 15-34 所 示 。 
EEJDp 打开 【记录 集 】 对 话 框 。 输 入 记录 集 名 称 ， 选 择 使 用 的 连接 ， 选 择 使 用 的 数据 


库 ， 选 择 【 全 部 】 单 选 按钮 ， 显 示 全 部 字段 ， 最 后 单 击 【确定 】 按 钮 ， 如 图 15-35 


所 示 。 


Es > 
Reece 一 要 
rr mw | 
可 Wx | 

EE 
Em 


图 15-34 选择 【记录 集 (查询 )】 命 令 图 15-35 【记录 集 】 对 话 框 


EEJS9 单 击 【测试 】 按 钮 来 测试 连接 结果 ， 此 时 出 现 【 测 试 SQL 指令 】 对 话 框 ， 上 面 
显示 了 数据 库 中 的 所 有 数据 ， 单 击 【 确 定 】 按 钮 回 到 先前 的 对 话 框 。 最 后 单 击 【 确 
定 】 按 钮 结束 设置 ， 回 到 【 绑 定 】 面 板 ， 如 图 15-36 所 示 。 

EEC) 在 【 绑 定 】 面 板 上 会 看 到 名 为 【记录 集 (RecClassMates)】 的 记录 集 ， 单 击 田 苹 
可 以 看 到 记录 集 内 的 所 有 字段 名 称 ， 如 图 15-37 所 示 。 
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classBirthday 
classEnail 
classPhone 
classAddress 
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15-36 【测试 SQL 指令 】 对 话 框 图 15-37 【 绑 定 】 面 板 


本 TY 拖 动 这 些 字段 将 它 放 在 网 页 上 显示 ， 如 图 15-38 所 示 。 
拖 动 完毕 之 后 的 效果 如 图 15-39 所 示 。 
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~ 动 
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EE 入 
图 15-38 ” 拖 动 字段 图 15-39 最终 效果 

EEC 在 当前 设置 中 ， 若 是 预览 ， 只 会 读 出 数据 库 的 第 一 笔 数据 ， 但 在 实际 工作 中 需 ”用 
要 设置 【重复 区 域 】， 将 所 有 数据 一 一 读 出 。 解 决 这 一 问题 的 方法 是 ， 首 先 选取 设 号 

置 重复 的 区 域 。 在 【服务 器 行为 】 选 项 卡 中 单 击 + 号 按钮 ， 在 弹出 的 快捷 菜单 中 选择 。 允 
【重复 区 域 】 命 令 ， 如 图 15-40 所 示 。 

库 


ECESRB 在 打开 的 【重复 区 域 】 对 话 框 中 设置 【显示 】 为 【所 有 记录 】 来 显示 所 有 数 
据 ， 再 单 击 【 确 定 】 按 钮 ， 如 图 15-41 所 示 。 


aa EECISLZI 
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AND A a MD WD NE AD OD mo 


bee Om a i 
t Wm wm ER 
15-40 选择 【重复 区 域 】 命 令 15-41 【重复 区 域 】 对 话 框 
ECED) 设置 完毕 后 ， 在 表格 上 方 可 以 看 到 “重复 ”灰色 标签 ， 如 图 15-42 所 示 。 
Dw We x | 


他 芭 二 号 FAD. 0 4 
仿 计 向 学 入 训 ER 


图 15-42 添加 “重复 ”标签 
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EC 预览 结果 。 单 击 【活动 数据 视图 】 按 钮 进入 即时 数据 视图 的 显示 模式 ， 会 看 到 
在 编辑 页 面 里 数据 被 全 部 读 了 进来 ， 


如 图 15-43 所 示 。 
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图 15-43” 读 出 的 数据 信息 


EC 按 F12 键 打 开 浏览 器 。Dreamweaver CS6 轻 轻 松 松 地 将 数据 库 的 数据 转化 成 了 
真实 的 网 页 ， 这 样 便 完 成 了 <showdata php> 的 制作 。 选 择 【 文 件 】 一 【保存 】 命 令 保 


存 此 网 页 ， 如 图 15-44 所 示 。 
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南投 县 捕 里 镇 北 于 路 一 着 0 号 


网 页 预览 效果 


15.4 加 密 MySQL 数据 库 


本 节 将 介绍 MySQL 数据 库 的 高 级 应 用 ， 


库 的 加 密 等 内 容 。 


主要 包括 MySQL 数据 库 的 安全 、MySQL 数据 


15.4.1 MySQL 数据 库 的 安全 问题 


MySQL 数据 库 是 存在 于 网 络 上 的 数据 库 系 统 ， 只 要 是 网 络 用 户 ， 都 能 连接 到 该 资源 ， 如 
果 没 有 权限 或 其 他 措施 ， 任 何人 都 可 以 对 MySQL 数据 库 进 行 存 取 。MySQL 数据 库 在 安装 完 
毕 后 ， 默 认 情 况 下 是 完全 不 设防 的 ， 即 任何 人 都 可 以 不 使 用 密码 就 连接 到 MySQL 数据 库 ， 
这 是 一 个 相当 危险 的 安全 漏洞 。 

1. phpMyAdmin 管理 程序 的 安全 考虑 


phpMyAdmin 是 一 套 网 页 界面 的 MySQL 管理 程序 ， 有 许多 PHP 的 程序 设计 师 都 会 将 这 
套 工具 直接 上 传 到 他 的 PHP 网 站 文件 夹 里 ， 管 理 员 只 能 从 远 端 通过 浏览 器 登录 phpMyAdmin 
来 管理 数据 库 。 

这 个 方便 的 管理 工具 是 否 也 是 方便 的 入 侵 工具 呢 ? 没 错 ， 只 要 是 对 phpMyAdmin 管理 较 
为 熟悉 的 朋友 ， 看 到 该 网 站 是 使 用 PHP+MySQL 的 互动 架构 ， 都 会 去 测试 该 网 站 
<phpMyAdmin> 的 文件 夹 是 否 安装 了 phpMyAdmin 管理 程序 。 若 是 网 站 管理 员 一 时 疏忽 ， 未 
采取 有 效 的 手段 ， 别 人 很 容易 通过 此 程序 ， 进 入 该 网 站 的 数据 库 。 

2. 防 堵 安全 漏洞 的 建议 

无 论 是 MySQL 数据 库 本 身 的 权限 设置 ， 还 是 phpMyAdmin 管理 程序 的 安全 漏洞 ， 为 了 
避免 他 人 通过 网 络 入 侵 数 据 库 ， 用 户 必 须 做 好 以 下 几 件 事 。 

(1) 修改 phpMyAdmin 管理 程序 的 文件 夹 名 称 。 这 个 做 法 虽然 简单 ， 但 至 少 已 经 拦截 掉 
一 大 半 非 法 入 侵 者 了 。 最 好 是 修改 成 不 容易 猜 到 ， 与 管理 或 是 MySQL、phpMyAdmin 等 关键 
字 无 关 的 文件 夹 名 称 。 

(2) 为 MySQL 数据 库 的 管理 账号 加 上 密码 。 我 们 一 再 提 到 MySQL 数据 库 的 管理 账号 
root， 默 认 是 不 设 任何 密码 的 ， 这 就 好 像 装 了 安全 系统 ， 却 没 打 开 电 源 开 关 一 样 。 所 以 ， 蔡 
root 加 上 密码 是 相当 重要 的 。 

(3) 养 成 备份 MySQL 数据 库 的 习惯 。 一 旦 所 有 安全 措施 都 失效 了 ， 如 果 用 户 平常 就 有 
备份 的 习惯 ， 那 么 即使 数据 被 删除 了 ， 用 户 也 能 很 轻松 地 将 数据 恢复 。 


15.4.2 案例 4 一 一 为 MySQL 管理 账号 加 上 密码 


在 MySQL 数据 库 中 的 管理 员 账 号 为 root， 为 了 保护 数据 库 账 号 的 安全 ， 需 要 对 管理 员 账 
号 加 密 。 具 体操 作 步 又 如 下 。 

ESJDp 打开 浏览 器 ， 在 网 址 栏 中 输入 “http:localhostphpMyAdminindex.php”， 进 入 
phpMyAdmin 的 管理 主 界面 。 单 击 【权限 】 文 字 链 接 ， 设 置 管理 员 账 号 的 权限 ， 如 
图 15-45 所 示 。 

ES 这 里 有 两 个 root 账号 ， 分 别 为 由 本 机 (localhosb 进 入 和 所 有 主机 (: : 1) 进 入 的 管 
理 账 号 ， 默 认 没 有 密码 。 首 先 修改 所 有 主机 的 密码 ， 单 击 【编辑 权限 】 链 接 ， 进 入 
下 一 界面 ， 如 图 15-46 所 示 。 
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15-45 ”设置 管理 员 密码 


目 蓝 据 放 刁 SQL 启 状 态 马 二 旭 制 昌 志 。” 司 进程 。 号 权限 


查看 用 户 

[DaecoerenHi kimnorpalal 
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15-46 【查看 用 户 】 界 面 


国 于 BY 在 打开 的 界面 中 的 【密码 】 文 本 框 中 输入 所 要 使 用 的 密码 ， 单 击 【执行 】 按 


钮 ， 如 图 15-47 所 示 。 


EEI 执行 完成 后 ， 将 显示 执行 的 SQL 语句 。 单 击 【 编 辑 权限 】 链 接 ， 设 置 另 一 个 账 
号 ， 操 作 方法 和 上 一 步 类 似 ， 此 处 再 重复 讲述 ， 如 图 15-48 所 示 。 


| Woe | 
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图 15-47 ”修改 密码 
se— 


了 提示 
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同 驮 据 库 。 且 SQL 加 关 名 同 呈 出 发 二进制 B 志 莉 


SET PASSWORD FOR VnolB 1 -PASSWORDIe ) 


查看 用 户 


ABCDODEFGHIJKLMNOPGQ 


用 户 主机 。。 淹 汉 全 局 积 队友。 轨 术 福 作 
[ 有 UsMCE 到 昭明 知 权限 局 5 出 
三 4 locahost usacr 一 癌 曙 各 权限 区 5 出 
Foot 127001 否 ML PRIVILEcrs 是 疙 铺 入 权 限 局 5 出 


Fat =1 合十 入 权限 局 5 出 


人 2 省 /2 不 千 


图 15-48 为 其 他 账户 添加 密码 


在 修改 完毕 之 后 重新 登录 管理 界面 ， 就 可 以 正常 使 用 MySQL 数据 库 的 资源 
了 。 修 改过 数据 库 密 码 之 后 ， 需 要 同时 修改 网 站 的 数据 库 连 接 设置 ， 操 作 见 


15.3.2 节 step 03， 设 置 root 密码 为 相应 密码 即 可 。 


15.5 ”实战 演练 一 一 数据 库 的 备份 与 还 原 


在 MySQL 数据 库 里 备份 数据 ， 是 十 分 简单 又 轻松 的 事情 。 本 节 将 介绍 如 何 备份 MySQL 
的 数据 表 ， 以 及 如 何 删除 和 插入 数据 表 。 


1. 数据 库 的 备份 


用 户 可 以 使 用 phpMyAdmin 的 管理 程序 将 数据 库 中 的 所 有 数据 表 以 一 个 单独 的 文本 文件 
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导出 。 当 数据 库 受 到 损坏 或 是 要 在 新 的 MySQL 数据 库 中 加 入 这 些 数据 时 ， 只 需 将 这 个 文本 
文件 插入 即 可 。 

以 本 章 所 使 用 的 文件 为 例 ， 先 进入 phpMyAdmin 的 管理 界面 ， 就 可 以 备份 数据 库 了 ， 具 
体 的 操作 步骤 如 下 。 

EC 选择 需要 导出 的 数据 库 ， 单 击 【导出 】 链 接 ， 进 入 下 一 页 ， 如 图 15-49 所 示 。 

ED29 选择 导出 方式 为 【快速 -显示 最 少 的 选项 】， 单 击 【执行 】 按 钮 ， 如 图 15-50 所 示 。 
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se 四 
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tN 千 50 和 殷 薪 是 对 5S% 二 SN ves © a 
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ee | moe lost sett a 
图 15-49 ”选择 要 导出 的 数据 库 图 15-50 选择 导出 方式 


EEC 打开 【文件 下 载 】 对 话 框 ， 单 击 【保存 】 按 钮 ， 如 图 15-51 所 示 。 
EEC 打开 【另存 为 】 对话 框 ， 在 其 中 输入 保存 文件 的 名 称 ， 设 置 保存 的 类 型 及 位 
置 ， 如 图 15-52 所 示 。 


Sn MySQL 备份 下 的 文件 是 扩展 名 为 *.sql 的 文本 文件 ， 这 样 的 备份 操作 不 仅 简 
SS 单 ， 文件 内 容 也 较 小 。 
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量 Le 
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名 称 : class sql 二 
类 型 未知 文件 类 型 恒 本 
来 源 ，lecalhest 于 吝 
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图 15-51 【文件 下 载 】 对 话 框 15-52 【另存 为 】 对 话 框 


2. 数据 库 的 还 原 


还 原 数据 库 文件 的 操作 步骤 如 下 。 
EC) 在 执行 数据 库 的 还 原 前 ， 必 须 将 原来 的 数据 表 删 除 。 单 击 classmates 的 【删除 】 
链接 ， 如 图 15-53 所 示 。 
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-案例 课堂 四 一 
此 时 会 显示 一 个 询问 画面 ， 单 击 【确定 】 按 钮 ， 如 图 15-54 所 示 。 
| x 
引 基 的 局 Sa 和 要案 加 二 和 司 S% 豆 SA 少 妆 作 DROP TABLE dassmates 
ABore 于 强人 和 
om 可 | Dee EA 
rr 0 mep 
hog T_ 2)z7 志 [二 一 取消 确定 
避让 
六 和 hi 柄 扫 拓 字典 EA 
15-53 ”选中 要 删除 的 数据 表 15-54 ”信息 提示 框 


ED 回 到 原 界 面 ， 会 发 觉 该 数据 表 已 经 被 删除 了 ， 如 图 15-55 所 示 。 
EC 插入 刚才 备份 的 <class.sql> 文 件 ， 将 该 数据 表 还 原 。 单 击 【 导 入 】 链 接 ， 如 
图 15-56 所 示 。 


phpMyAdmin 
扫 儿 物 加 SM 拖拉 大 国名 园 5 出 二 


了 结构 司 SQL 有 又 搜索 回 查 广 加 导出 园 导 入 


表 。 报 作 行 数 她 类 型 整理 大 小 ”多余 ET 
1 张 表 总 计 0 InnoDB latin1_swedish_ci ~16.0 KB 0 字 节 cass J 
» | 禄 在 下 所 诛 class 中 洒 建 一 张 芭 拔 去 
全 全 选 /全 不 选 选中 项 : 到 Se 人 Ba 
篇 打 印 祯 蜗 电 数据 字典 
图 15-55 ”删除 数据 表 图 15-56 【导入 】 按 钮 


ED 打开 要 导入 的 文件 页 面 中 ， 单 击 界 面 中 的 【浏览 】 按 钮 ， 如 图 15-57 所 示 。 
EEIos 打开 【选择 要 加 载 的 文件 】 对 话 框 ， 选 择 Ci\class.sql 文件 ， 单 击 【打开 】 按 
钮 ， 如 图 15-58 所 示 。 


县 续 析 | 回 saL 。 忌 直 过 回 考 询 恩 S 局 SA 上 风 


导入 到 数据 库 “class” 


要 导入 的 文件 : 


文件 可 能 已 压 编 (gzip, zip) 或 未 压 编 。 
正 绵 文件 名 必须 以 .[ 巾 式 ].[ 压 篇 方式 ] 站 尾 。 如 ; .sqLzip 


从 计算 机 中 上 传 : 出 交 se 葬 | ( 最 大 限 鹿 : 2.043 KB) 


文件 的 字符 集 : ut ”加 


图 15-57 【要 导入 的 文件 】 界 面 图 15-58 【选择 要 加 载 的 文件 】 对 话 框 


四 TY 单 击 【执行 】 按 钮 ， 系 统 即 会 读 取 class.sql 文件 中 所 记录 的 指令 与 数据 ， 将 数 
据 表 恢复 ， 如 图 15-59 所 示 。 
EEDD) 在 执行 完毕 后 ，class 数据 库 中 又 出 现 了 一 个 数据 表 ， 如 图 15-60 所 示 。 


导入 到 数据 库 "class” 
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Ex 
图 15-59 ”开始 执行 导入 操作 图 15-60 导入 数据 表 
这 样 原来 删除 的 数据 表 classmates 又 还 原 了 ， 如 图 15-61 所 示 。 


| 鸣 茹 构 | 辐 saL 忆 搜索 ， 局 坦 询 加 所 ， 加 SA 


表 - 操作 行 数 
三 classmates 加 浏览 月 结构 屋 搜索 张 插 入 目 清 空 @ 出 除 
1 张 表 总 计 


个 全 选 /全 不 选 选中 项 : 到 
仿 打印 预览 遇 数据 字 奥 


图 15-61 数据 表 操作 界面 


15.6” 跟 我 练 练 手 


15.6.1 练习 目标 
能 够 熟练 掌握 本 章节 所 讲 内 容 。 
15.6.2 上 机 练习 


练习 1: 定义 动态 网 站 站 点 。 

练习 2: MySQL 数据 库 的 使 用 。 

练习 3: 在 网 页 中 使 用 MySQL 数据库。 
练习 4: 加 密 MySQL 数据 库 。 

练习 5: 备份 与 还 原 MySQL 数据 库 。 


册 噶 1DSAWN 酒 靖 灯 导 习 寺 过 光村 一 一 料 芝 下 喇 习 
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15.7 高 手 甜 点 


甜点 1: 如 何 解决 PHP 读 出 的 MySQL 数据 中 的 乱码 问题 ? 


如 图 15-62 所 示 ， 在 连接 文件 中 加 入 如 下 代码 即 可 解决 : 
mysql_query("set character set 'gb2312");// 读 数据 库 
mysql_query("set names 'gb2312");// 写 数据 库 


<?php 
划 FileName="Connection_php_mysql -htm 

Type="MYSQL™ 

着 HTTP="true™ 

$hostname_connclass = “localhost"; 

$database connclass = “class”; 

$username_connclass = “root”™; 

S$password_connclass = “root”™; 

$connForun = mysql_pconnect($hostnane_connclass, $usernane_connclass, 
$password_connclass) or trigger_error(mysql_error(),E_USER_ERROR); 
mysql_query("set character set "gb2312'");/7 读 库 

mysql_query("set names "gb2312'");// 写 库 

?> 


图 15-62 加 入 的 代码 
甜点 2: 如 何 导出 制定 的 数据 表 ? 
如 果 用 户 想 导出 制定 的 数据 表 ， 在 选择 导出 方式 时 ， 选 择 【 自 定义 -显示 所 有 可 用 的 选 
项 】， 然 后 在 【数据 表 】 列 表 中 选择 需要 导出 的 数据 表 即 可 ， 如 图 15-63 所 示 。 


导出 方式 
快速 - 吐 不 最 少 的 选 册 
[图 自 定 义 - 显示 所 有 可 用 的 选项 


圣 据 表 : 


全 选 /全 不 选 


图 15-63 ”选择 导出 数据 表 的 方式 


四 
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在 开发 动态 网 站 的 过 程 中 ， 开 发 人 员 经 常会 遇 到 添加 需要 的 应 用 模块 问题 。 本 
一 下 常见 的 动态 应 用 模块 的 开发 方法 和 技巧 。 包 括 在 线 点 播 模块 的 开 


章 就 来 介绍 
发 、 网 页 搜索 模块 的 开发 、 在 线 支 付 模块 的 开发 、 在 线 客服 模块 的 开发 和 天 气 预报 


模块 的 开发 。 
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16.1 网 站 模块 的 概念 


模块 指 在 程序 设计 中 ， 为 完成 某 一 功能 所 需 的 一 段 程序 或 子 程序 ， 或 指 能 由 编译 程序 、 
装配 程序 等 处 理 的 独立 程序 单位 ; 或 指 大 型 软件 系统 的 一 部 分 。 网 站 模块 就 是 指 在 网 站 制作 
中 能 完成 某 一 功能 所 需 的 一 段 程序 或 子 程序 。 

在 网 站 建设 中 ， 经 常会 用 到 一 些 功 能 ， 比 如 在 线 客服 、 在 线 播放 、 搜 索 、 天 气 预 报 等 ， 
这 些 被 称 为 常用 功能 。 这 些 功 能 具有 很 好 的 通用 性 ， 在 学 习 掌 握 之 后 可 以 直接 运用 到 自己 的 
网 站 建设 中 。 


\ 


. 
> 2 382 


16.2 ”网 站 模块 的 使 用 


网 站 模块 是 实现 某 一 功能 的 完整 代码 ， 在 使 用 的 时 候 ， 只 需 在 合适 的 位 置 插入 这 段 代 码 
就 行 了 。 


16.2.1 案例 1 一 一 程序 源 文件 的 复制 


本 书 会 把 每 个 不 同 的 程序 ， 以 文件 夹 的 方式 完整 地 整理 在 <C:\Apache2.2\htdocs> 里 ， 请 将 
本 章 范例 文件 夹 中 的 < 源 文件 \ model> 完 整 复制 到 <C:\Apache2.2\htdocs> 里 ， 这 样 就 可 以 进行 网 
站 的 规划 了 。 


16.2.2 案例 2 一 一 新 建站 点 


请 准备 好 先前 的 网 站 程序 基本 数据 表 来 定义 新 建 的 站 点 。 首 先进 入 Dreamweaver CS6 后 
选择 主 菜单 的 【站 点 】 一 【管理 站 点 】 后 ， 在 管理 网 站 对 话 框 中 选择 【新 建 】 一 【站 点 】 进 
入 对 话 框 来 设置 。 

EC 打开 【站 点 设置 】 对 话 框 ， 输 入 站 点 名 称 “DWPHPCS6 网 站 模块 ”， 选 择 站 点 

文件 夹 为 C:apach2.2\htdocswmodel， 如 图 16-1 所 示 。 

本 于 在 左 侧 列表 中 选择 【服务 器 】 选 项 卡 ， 单 击 + 按钮 ， 如 图 16-2 所 示 。 


本 全 将 在 此 位 和 注 皮 了 上 web 上 前 而 面 限 务 屠 ， 尼 对 活检 的 名 来自 
您 可 以 在 此 处 为 Dreamweayer 站 点 选择 本 地 文件 赤 和 名 称 。 ES ntemet 服务 提供 商 (SP) 或 web 六 
| EE RR 
本 地 站 点 文件 夹 : [C: Wpache2.2htoocsimodel\ El es 2 
= 
和 助 上 对 ][ 驹 Cm Ce 
16-1 【站 点 设置 】 对 话 框 16-2 ”设置 服务 器 


T6331 


在 基本 标签 框 中 输入 服务 器 名 称 “DWPHCS6 网 站 模块 ”， 选 择 连接 方法 为 
【本 地 /网 络 】， 选 择 服务 器 文件 夹 为 C:\Apache2.2\htdocs\model， 设 置 Web URL 为 
http://localhost/model/， 如 图 16-3 所 示 。 


SS 选择 【高 级 】 选 项 卡 ， 设 置 测试 服务 器 的 服务 器 模型 为 PHP MySQL， 最 后 单 


【保存 】 按 钮 保存 站 点 设置 ， 如 图 16-4 所 示 。 


Web URL: [re 


帮助 |] 保 矿 ”|][ 职 滑 


远程 服务 器 


测试 服务 器 


服务 器 模型 :| PHP MySQL ” 


i 


= 


口 维护 同步 信息 
口 保存 时 自动 格 文件 上 传 到 服务 器 
口 自用 文件 取出 功能 

可 打开 文件 之 前 取出 


职 出 名 称 


电子 邮件 地 址 : 


保存 


图 16-3 【基本 】 选 项 卡 


图 16-4 【高 级 】 选 项 卡 


16.3 ”常用 动态 网 站 模块 开发 


下 面 介绍 常见 动态 网 站 模块 的 开发 过 程 。 


案例 3 一 一 在 线 点 播 模 块 开发 


在 线 点 播 不 仅 能 实现 播放 视频 功能 ， 还 可 以 实现 许多 有 用 的 辅助 功能 。 


(1) 控制 播放 器 窗口 状态 。 
(2) 开启 声音 。 
在 线 播放 模块 运行 效果 如 图 16-5 所 示 。 


Em 


在 线 播放 模块 
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在 【文件 】 面 板 中 选择 要 编辑 的 网 页 <sp\index..php>， 双 击 将 其 打 编辑 区 开 在 ， 如 图 16-6 
所 示 。 从 code.txt 中 复制 粘贴 到 相应 的 位 置 ， 如 图 16-7 所 示 。 


<meta http-equiv="“Content-Type” content="text/htnl; 
charset=gb2312"> 

<style> 

body {text-align: center;} 

#main {width: 500px; height:300px; margin:50px auto;} 


“submit” 


蜂 所 知 民 忆 妆 | 同 由 全 吉 | 内 避 入 | 端口 


16-6 ”打开 代码 编辑 区 


”width="500” classid="CLSID: 6BF52A52-394A-11d3-B153-00CO4F79FAAG"> 
> 


16-7 输入 的 代码 


16.3.2 ”案例 4 一 一 网 页 搜索 模块 开发 


在 浏览 网 站 中 ， 我 们 经 常 看 到 有 一 个 百度 搜索 框 或 者 google 的 搜索 框 ， 如 果 在 制作 
的 网 站 中 加 入 该 模块 ， 能 为 网 站 访客 带 来 很 大 的 便捷 ， 实 现 效果 如 图 16-8 所 示 。 


百度 入 索 


Google Cr 


< 


图 16-8 ”网 页 搜索 模块 
在 【文件 】 面 板 中 选择 要 编辑 的 网 页 <ss\index..php>， 双 击 将 其 在 编辑 区 打开 ， 如 图 16-9 


所 示 。 从 code.txt 中 复制 粘贴 到 相应 的 位 置 ， 如 图 16-10 所 示 。 


《meta ttp-equive"Content Type” cont ent= text/html: 
charset=gb2312"> 

/head> 

Cstyle> 

body {text-align: center;} 

Amain {width: 500px, height:300px, margin:50px auto;} 


/div> 
《div> 


着 忆 节 六 洒 则 民 司 二 直 一 职 信 人 广 直 局 习 总 


/div> 
/div> 


[< 上 严 和 区 避 妆 | 辐 国 KK 守 才 | 灶 呈 人 4 | 切 局 


/body> 
/htm> 网 
J : ss | r 
hody> Cdivimain? Cdiv> REorm i vg 回国 342 x 458v 1Xk/1 秒 简体 中 文 (G82312) 


图 16-9 ”代码 编辑 区 


CVApxhe? Ahtdocs 


https /vow baid oo” Cing src= 
“http://ing. baidu. con/ing/10go0-80px. gif” alt="Baidu” 
align="botton” border="0">¢/a> 


图 16-10 ”添加 网 页 搜索 模块 代码 
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16.3.3 ”案例 5 一 一 在 线 支 付 模块 开发 


在 电子 商务 发 展 的 今天 ， 网 上 在 线 支付 应 用 越 来 越 广泛 ， 那 么 网 上 支付 是 怎么 实现 的 
呢 。 多 数 的 银行 和 在 线 支 付 服 务 商都 提供 了 相应 的 接口 供用 户 使 用 ， 开 发 人 员 要 做 的 就 是 把 
接口 中 需要 的 参数 搜集 并 提交 到 接口 页 面 中 。 

下 面 就 以 支付 宝 为 例 ， 介 绍 一 下 支付 宝 在 支付 过 程 中 是 如 何 搜集 数据 的 。 


支付 宝 接口 文件 可 以 从 支付 宝 商家 用 户 中 申请 获取 ， 在 接口 数据 中 需要 以 下 表单 信息 : 
"service" => "create_direct pay_by_user"，// 交 易 类 型 
"partner" => $partner, /合作 商户 号 
"return_url" => $return_url, // 同 步 返回 
: "notify_url" => $notify_url, // 异 步 返回 
" input charset” =>$ input charset, // 字 符 集 ， 默 认为 GBK 
"subject" => "商品 名 称 "， /商品 名 称 ， 必 填 
"body" => "商品 描述 "， /商品 描述 ， 必 填 
"out trade non => date(Ymdhms)， /商品 外 部 交易 号 ， 必 填 ( 保 证 唯一 性 ) 
"total_fee" => "0.01", /商品 单价 ， 必 填 ( 价 格 不 能 为 0) 
"payment type" =>"1", // 默 认为 1, 不 需要 修改 
"show_url" => $show_url, // 商 品 相关 网 站 
"seller email” => $seller email // 卖 家 邮箱 ， 必 填 
在 【文件 】 面 板 中 选择 要 编辑 的 网 页 <zfindex.php>， 双 击 将 其 在 编辑 区 打开 ， 如 图 16-11 
所 示 


16-11 在线 支付 模块 编辑 区 


这 里 根据 接口 需要 的 信息 进行 表单 布局 ， 并 最 后 通过 post 把 表单 数据 提交 到 接口 页 面 ， 
在 接口 页 面 只 需要 使 用 $_post【" 表 单字 段 名 "】 接 收 这 些 提 交 过 来 的 信息 就 可 以 了 。 


16.3.4 ”案例 6 一 一 在 线 客服 模块 开发 


在 线 客服 模块 在 电子 商务 网 站 建设 中 可 以 说 是 必 不 可 少 的 ， 通 过 在 线 客服 模块 ， 可 以 让 
访客 很 方便 地 与 网 站 运营 的 客服 人 员 进 行 沟 通 交 流 ， 如 图 16-12 所 示 。 


四 
售 386 
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16-12 ”在线 客服 模块 


在 【文件 】 面 板 中 选择 要 编辑 的 网 页 <qq\index..php>， 双 击 将 其 在 编辑 区 打开 。 切 换 到 代 
码 窗 口 ， 可 以 看 到 第 一 行为 和 9 模 沁 调用 方式 ， 四 


着 忆 芝 六 洒 同 民 司 寺 起 一 果 人 N 广 址 喇 习 寺 过 训 忆 几 9 小 站 


A 


index. php x 医 = a aa er. php 
ERED php 了 
| Re i i WA ti i 
1 <Iphp include( qq. php"): 2> 加 
Bt 
了 《head> 


16-13 ”调用 QQ 的 代码 


接着 打开 模板 文件 qq.php， 找 到 修改 qq 号 码 的 地 方 ， 在 实际 应 用 中 在 这 里 修改 相应 属性 
值 就 可 以 了 ， 如 图 16-14 所 示 。 


| 


调用 方法 ， 在 php 文 件 中 
$qqs=" 827475223, 5521465| 
$webtitle=“ 信 阳 农 家 审 

$on= "在线 ， 即 时 交谈 " ; 
$off=" 不 在 线 ， 请 留言 ; 


2 


图 16-14 ”修改 代码 


16.3.5 ”案例 7 一 一 天 气 预报 模块 开发 


天 气 预报 模块 对 一 些 办 公 性 质 的 网 站 来 说 很 实用 ， 它 可 以 通过 一 些 天 气 网 站 提供 的 相关 
代码 来 实现 。 下 面 一 段 代码 是 由 中 国 天 气 网 提供 的 调用 代码 : 

<iframe src="http://m.weather.com.cn/m/pnl2/weather.htm " width="245" 

height="110" marginwidth="0" marginheight="0" hspace="0" vspace="0" 

frameborder="0" scrolling="no"></iframe> 

在 使 用 上 述 代码 时 只 需 将 这 段 代 码 放 入 需要 设置 的 地 方 就 行 了 。 

在 【文件 】 面 板 中 选择 要 编辑 的 网 页 <tqindex.php>， 双 击 将 其 在 编辑 区 打开 。 切 换 
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到 拆 分 窗口 ， 如 图 16-15 所 示 。 


EEE style cs 


《img src= 
* “images/index_09. gif” 
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图 16-15 “天气 预报 模块 编辑 区 


添加 天 气 预报 模块 的 代码 完成 后 ， 就 可 以 将 该 网 页 保存 起 来 ， 然 后 在 下 浏览 器 中 预览 网 
页 ， 可 以 看 到 天 气 预报 模块 的 显示 效果 ， 如 图 16-16 所 示 。 


3 
广告 管理 系统 演示 


NS 郑州 温度 :11C~1C 
ES 
4 风 力 :小 于 3 级 


4. 浏览 查看 效果 


16-16 ”天 气 预 报 模块 预览 效果 
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娱乐 休闲 类 网 页 类 型 较 多 ， 结 合 主题 内 容 不 同 ， 所 设计 的 网 页 风格 差异 很 大 ， 
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比如 聊天 交友 、 星 座 运 程 、 游 戏 视频 等 。 本 章 主要 以 电影 网 为 例 ， 介 绍 娱乐 休闲 类 


网 页 的 制作 技巧 与 方法 。 
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17.1 网 站 分 析 及 准备 工作 
本 章 通 过 介绍 电影 网 网 站 的 建设 ， 认 识 娱乐 休闲 类 网 站 的 制作 与 开发 。 


17.1.1 设计 分 析 


休闲 娱乐 网 站 注重 图 文 混 排 的 效果 。 实 践 证 明 ， 只 有 文字 的 页 面 用 户 停留 的 时 间 相 对 较 
短 。 如 果 完 全 是 图 片 ， 又 不 能 概括 信息 的 内 容 ， 用 户 看 着 就 会 不 明白 。 因 此 使 用 图 文 混 排 的 
方式 是 比较 恰当 的 。 另 外 一 点 ， 休 闲 娱 乐 类 网 站 要 注意 引入 会 员 注 册 机 制 ， 这 样 可 以 积累 一 
些 忠 实 的 用 户 群体 ， 有 利于 网 站 的 可 持续 性 发 展 。 


17.1.2 ”网 站 工作 流程 图 
本 章 所 制作 的 休闲 娱乐 网 站 的 工作 流程 ， 如 图 17-1 所 示 。 


休闲 娱乐 类 网 站 
YY a ! 
首页 = | 栏目 N 信息 搜索 
和 了 电 
文章 浏览 | | 文章 管理 文章 浏览 || 文章 管理 
y 2 
index.php class .php、content pp 出 i 
filmAdmin.php、 filmAdd.php 

后 信息 维护 » filmFixphp filmDel.php 

a 

台 

管 类 别 维护 ,| classAdmin php classAdd.php、 classFix.php、 classDel.php 

理 


17-1 网 站 工作 流程 图 


17.1.3 数据库 分 析 


动态 网 站 的 核心 就 是 后 台数 据 库 ， 要 想 制作 本 章 的 休闲 娱乐 网 站 ， 首 先 需要 对 所 使 用 的 
数据 库 进行 分 析 。 

1. MySQL 数据 库 的 导入 

将 本 章 范例 文件 夹 中 的 < 源 文件 \ch16> 完 整 复制 到 C:\Apache2.2\htdocs 中 ， 之 后 就 可 以 开 


始 导 入 数据 库 了 。 
在 该 目录 中 有 本 章 范例 所 使 用 的 数据 库 备 份 文件 <db_16.sql>， 将 其 导入 ， 其 中 包含 了 三 
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汪 训 


个 数据 表 : admin、filmclass、film。 
2. 数据 表 分 析 


导入 数据 表 之 后 ， 在 这 个 页 面 中 可 以 选择 两 个 数据 表 后 方 的 【结构 】 文 字 链 接 观 看 数据 
表 内 容 ， 如 图 17-2 所 示 。 
表 ~ 操作 行 数 久 
admin ” 国 浏览 牟 结 构 号 搜索 引桥 入 晤 清空 删除 
film |] 浏 鉴 结构 镁 搜索 肚 插 入 如 清空 加 出 人 33 
_filmclass 赎 浏 览 参 结构 号 搜索 著 括 入 坦 清 裕 @ 删除 1 
3 张 表 ”总计 41 


识 将 潭 阁 贡 习 冰 函 弃 针 沛 刷 4 洲 全 


17-2 导入 的 数据 表 


e@ admin 数据 表 : 用 于 保存 登录 管理 界面 的 账号 与 密码 ， 主 索引 栏 为 [username] 字 段 ， NN 
如 图 17-3 所 示 。 NN 
类 型 ”整理 属性 空 默认 额外 操作 SS 
本 号 sername char(20) gb2312_chinese_ci 否 哆 修改 NS 
密码 char(20) gb2312_chinese_ci 否 人 2 修改 
图 17-3 ”查看 数据 表 


目前 数据 表 中 已 经 预存 有 一 条 数据 ， 如 图 17-4 所 示 ， 其 值 都 为 admin， 为 默认 使 用 的 账 
号 及 密码 。 
username passwd 


admin admin 


17-4 ”账户 与 密码 


e@ ”filmClass 数据 表 : 主要 用 于 电影 分 类 的 管理 。 本 数据 表 以 [class_id]( 电 影 类 别管 理 编 
号 ) 为 主 索 引 ， 并 设 定 为 UNSIGNED、auto_increment， 如 图 17-5 所 示 。 


名 字 类 型 整理 属性 。 空 默认 
编号 lass_id smallint(5) UNSIGNED 否 无 
类 别名 称 classname varchar(100) gb2312_chinese_ci 否 
排序 号 lassnum smallint[5) 和 否 0 


17-5 ”filmClass 数据 表 


e@ ”film 数据 表 : 主要 用 于 每 则 网 站 电影 信息 的 管理 。 本 数据 表 以 [film id]( 网 站 电影 信 
管理 编号 ) 为 主 索引 ， 并 设 定 为 UNSIGNED、auto_increment， 如 图 17-6 所 示 。 


1@ 


Dreamweaver 动态 网 站 开发 


案例 课堂 四 一 

名 字 类 型 整理 野性 ” 空 默认 
编号 film_id smallint(5) 0 和 否 无 
发 布 时 间 film time datetime 否 0000- 
标题 film_title varchar(100) gb2312_chinese_ci 否 
分 类 film type varchar(100) gb2312_chinese_ci 看 下 到 
发 布 人 film_editor varchar(100) gb2312_chinese ci 否 
图 片 film_photo varchar(100) gb2312_chinese_ci 否 
是 否 推荐 istop smallint(5) 否 0 
是 否 新 片 isnew smallint(5) 否 0 
影片 地 区 film_country smallint(5) 是 0 
下 载 地 址 film_Url varchar(100) gb2312_chinese_ci 次 
内 容 film_content text gb2312_chinese_ci 下 天 


图 17-6 ”film 数据 表 
17.1.4 制作 程序 基本 数据 表 
本 章 范例 的 网 站 程序 基本 数据 表 的 内 容 ， 如 表 17-1 所 示 。 
表 17-1 网 站 程序 基本 数据 表 


信息 名 称 内 容 
网 站 名 称 CHI16 
本 机 服务 器 主 文件 夹 Ci\Apache?.2\htdocs\ch16 
程序 使 用 文件 夹 C:\Apache?2.2\htdocs\ch16 
程序 测试 网 址 http://localhost/ ch16/ 
MySQL 服务 器 地 址 localhost 
管理 账号 /密码 root / root 
使 用 数据 库 名 称 Db 16 
使 用 数据 表 名 称 admin、filmclass、film 


17.2 网 站 结构 分 析 


本 例 中 的 网 站 首页 面 使 用 1-2-1 型 结构 进行 布局 ， 主 要 包括 导航 、 资 讯 中 心 及 下 方 的 脚 
效果 如 图 17-7 所 示 。 
二 级 页 面具 有 一 个 ， 使 用 1-2-1 型 结构 进行 布局 ， 如 图 17-8 所 示 。 
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达 将 站 忆 革 习 状 下 访 冲 注册 人 小 恒 


图 17-7 网 站 首页 


GG 


17-8 网 站 二 级 页 面 


17.3 ”网 站 主页 面 的 制作 


在 做 好 了 对 网 站 的 分 析 及 准备 工作 之 后 ， 就 可 以 正式 开始 制作 网 站 了 。 下 面 就 以 在 
Dreamweaver CS6 中 制作 为 例 进行 介绍 。 


17.3.1 ”管理 站 点 


制作 网 站 的 第 一 步 工作 就 是 创建 站 点 。 在 Dreamweaver CS6 中 创建 站 点 的 方法 在 前 面 的 
章节 中 已 经 介绍 ， 这 里 不 再 歼 述 。 
17.3.2 ”网 站 广告 管理 主页 面 的 制作 

由 于 本 书 篇 幅 所 限 ， 这 里 只 介绍 完成 页 面 制作 过 程 中 的 步骤 和 数据 绑 定 。 

1. 数据 库 连接 的 设置 

在 【文件 】 面 板 选择 要 编辑 的 网 页 <index php>， 双 击 将 其 在 编辑 区 打开 ， 接 着 切换 到 
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【数据 库 】 面 板 。 单 击 + 号 按钮 ， 在 弹出 的 菜单 中 选择 【MySQL 连接 】 命 令 ， 打 开 【MySQL 
连接 】 对 话 框 ， 在 其 中 输入 连接 的 名 称 和 “MySQL 的 连接 信息 ， 单 击 【 确 定 】 按 钮 ， 即 可 完 
成 数据 库 的 连接 设置 ， 如 图 17-9 所 示 。 


17-9 【MySQL 连接 】 对 话 框 


2. 模块 化 处 理 网 站 顶部 与 底部 

制作 本 章 的 实例 时 ， 仍 然 使 用 模块 化 结构 思想 ， 把 多 个 页 面 共用 的 部 分 单独 分 离 出 来 ， 
形成 多 个 单独 页 面 ， 在 需要 使 用 模块 的 地 方 引 入 一 下 就 行 。 本 实例 主要 有 两 个 需要 单独 分 离 
的 页 面 ， 分 别 是 顶部 导航 (top.php)、 网 站 底部 (foot.php)。 


3. 绑 定数 据 库 
在 首页 中 有 九 处 需要 动态 调用 数据 的 地 方 ， 分 别 是 今日 推荐 、 推 荐 图 片 、 最 新 电影 、 最 
新 综艺 、 最 新 动作 、 最 新 国产 、 最 新 欧美 、 最 新 日 韩 、 最 新 动漫 ， 如 图 17-10 所 示 。 


ndes. she x 国 
CARY onnchl8 php tb js zhouFlash js top php foot ph 


代码 上 拆 分 [设计 | 实时 视 目地. 芭 . 上 bp 大 区 


标题 。 休闲 直 乐 类 同 站 


动作 片 科幻 片 


图 17-10 ”网 站 的 首页 
分 别 对 首页 中 的 数据 进行 绑 定 的 操作 步骤 如 下 。 
EDp 在 【 绑 定 】 面 板 中 打开 今日 推荐 Recfilmtop 记录 集 ， 此 记录 集 从 信息 表 中 检索 
标记 istop=1 的 15 条 最 新 信息 ， 如 图 17-11 所 示 。 


避 录 集 


图 17-11 【记录 集 】 对 话 框 
EC 选择 【服务 器 行为 】 一 【重复 区 域 】 选 项 ， 打 开 【 重 复 区 域 】 对 话 框 ， 设 定 重 
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第 【 
复 区 域 的 参数 ， 如 图 17-12 所 示 。 3 
章 
榨 
休 
闲 
类 
网 
站 
图 17-12 【重复 区 域 】 对 话 框 旨 
ETT》 打开 推荐 图 片 记录 集 (Recifhotop)， 从 电影 表 中 检索 最 新 推荐 的 信息 以 图 片 形式 三 
显示 在 首页 ， 如 图 17-13 所 示 。 
记录 集 四 
一 司 区 过 
ln_id, film_title, fils_photo 
ER Bs i EE 


17-13 【记录 集 】 对 话 框 


EEC 选择 【服务 器 行为 】 一 DWTeam 一 Horizontal LooperMX 选项 ， 并 将 其 设置 成 
为 1 行 2 列 ， 如 图 17-14 所 示 。 

ES 打开 Horizontal LooperMX 对 话 框 ， 设 置 图 片 以 1 行 2 列 的 方式 水 平 显示 ， 如 

图 17-15 所 示 。 
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17-14 ”选择 Horizontal LooperMX 选项 图 17-15 _ Horizontal LooperMX 对 话 框 
打开 最 新 电影 记录 集 (Recfilmnew)， 获 取 最 新 的 电影 信息 ， 如 图 17-16 所 示 。 


EC 选择 【服务 器 行为 】 一 【重复 区 域 】 选 项 ， 打 开 【 重 复 区 域 】 对 话 框 ， 设 定 重 
复 区 域 记 录 条 数 为 6， 如 图 17-17 所 示 。 
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图 17-17 【重复 区 域 】 对 话 框 


打开 最 新 综艺 (Reczhongyi)、 最 新 动作 (Recdongzuo)、 最 新 动漫 (Recdongman) 记 
录 集 ， 分 别 完成 对 最 新 发 布 的 综艺 信息 、 动 作 电影 信息 、 动 漫 信息 的 检索 。 这 里 以 
film type 和 isnew 作为 检索 条 件 ， 只 是 改变 了 一 下 film _type 参数 值 ， 如 图 17-18 
所 示 。 


17-18 【记录 集 】 对 话 框 


ECESRD) 选择 【服务 器 行为 】 一 【重复 区 域 】 选 项 ， 打 开 【 重 复 区 域 】 对 话 框 ， 设 定 重 
复 区 域 记 录 条 数 为 8， 如 图 17-19 所 示 。 


17-19 【重复 区 域 】 对 话 框 


打开 最 新 上 传 国产 (Recguochan)、 最 新 上 传 欧美 (Recoumei)、 最 新 上 传 日 韩 
(Recrihan) 记 录 集 ， 分 别 完成 对 最 新 上 传 的 国产 电影 、 欧 美 电 影 、 日 韩 电影 的 检索 ， 
设置 条 件 为 flm_ type 和 film country。 在 条 件 设置 时 用 1 代表 国产 ，2 代表 欧美 ，3 
代表 日 韩 ， 如 图 17-20 所 示 。 


. 
、 2 396 


a 


记录 集 区 
a fe 取消 
已 3 
E33 
SQL: SELECT film_id fils title, fils_photo 
FEON Film 简单 
WERE filn_country = 1 and fila_typeO 近世 and fils_typeO 动漫 ' ee 
ORDER BY rie tiny DESc 需 助 


17-20 【记录 集 】 对 话 框 


ED 选择 【服务 器 行为 】 一 DWTeam 一 Horizontal Looper MX 选项 ， 如 图 17-21 
所 示 。 

四 于 PY 打开 Horizontal LooperMX 对 话 框 ， 设 置 图 片 以 1 行 3 列 的 方式 显示 ， 如 图 17-22 
所 示 。 
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17-21 ”Horizontal Looper MX 选项 17-22 ”Horizontal LooperMX 对 话 框 


17.4 网 站 二 级 页 面 的 制作 


在 【文件 】 面 板 中 打开 目录 下 的 classphp， 在 列表 中 创建 一 个 获取 所 有 本 类 电影 信息 的 
记录 集 Recfilmeclass 和 息 的 Recfilmtop， 如 图 17-23 所 示 。 


rT 
代码 | 拆 分 |[ 设计 ] 实时 视 目 地. 吕 只 BF 吕 


记录 集 (Recfilnclass) 
记录 集 (Recfilmtop) 


动作 片 科幻 片 伦理 


17-23 ”编辑 窗口 


Dreamweaver 动态 网 站 开发 
案例 课堂 四 一 


Class.php 记录 集 的 设置 与 首页 记录 集 的 设置 不 同 。 首 页 记录 集 的 设置 是 绑 定 到 某 个 信息 
分 类 下 ， 或 未 指定 分 类 ， 而 列表 页 记录 集 需要 动态 获取 传 过 来 的 参数 film type， 其 参数 值 设 
定 为 $ GET['film type]。 

网 站 二 级 页 面 记录 集 的 设置 步骤 如 下 。 

EEIDp 打开 Recfilmtop 记录 集 ， 该 记录 集 选 取 5 条 本 栏目 下 的 标记 为 推荐 的 信息 ， 如 
图 17-24 所 示 。 
EC 设 定 重复 记录 ， 指 定 显示 10 条 记录 ， 如 图 17-25 所 示 。 
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17-24 【记录 集 】 对 话 框 17-25 【重复 区 域 】 对 话 框 


区 于 BY 打开 Recfilmclass 记录 集 ， 该 记录 集 选 取 本 分 类 下 的 所 有 电影 信息 ， 并 以 图 片 类 
别 方式 分 页 显示 ， 如 图 17-26 所 示 。 

EC 选取 【服务 器 行为 】 一 DWTeam 一 Horizontal Looper MX 选项 ， 将 其 设 定 为 3 行 
3 列 ， 如 图 17-27 所 示 。 
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17-26 【记录 集 】 对 话 框 17-27 ”Horizontal Looper MX 对 话 框 


17-28 ”插入 记录 集 导航 条 
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17.5 网 站 后 台 分 析 与 讨论 


由 于 后 台 设 计 涉 及 的 功能 比较 多 ， 所 以 不 能 像 前 边 的 章节 那样 ， 直 接 进 入 某 个 管理 页 
面 ， 为 此 本 网 站 后 台 使 用 了 一 个 index.php 页 进行 导航 。 在 【文件 】 面 板 中 打开 admin 目录 下 
index.php 页 面 ， 可 以 看 到 这 里 就 是 一 个 导航 页 ， 没 有 具体 的 页 面 功能 ， 如 图 17-29 所 示 。 
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17-29 ”网 站 后 台 管理 

新 增 影片 类 别 、 管 理 影片 类 别 用 于 管理 影片 信息 的 分 类 ， 新 增 影片 信息 和 管理 影片 信息 
用 于 影片 信息 的 管理 维护 。 

从 中 可 以 看 出 信息 类 型 的 后 台 在 实现 过 程 中 运用 到 的 技术 是 一 样 的 ， 实 现 过程 都 是 经 由 
添加 信息 执行 【服务 器 行为 】 一 【插入 记录 】， 到 管理 页 面 的 分 页 显示 ， 再 到 每 条 信息 后 的 
编辑 链接 页 面 执行 【服务 器 行为 】 一 【更 新 记录 】， 每 条 信息 后 的 删除 链接 页 面 执行 【服务 
器 行为 】 一 【删除 记录 】， 不 同 之 处 就 在 于 各 个 表 字 段 和 字段 的 多 少 不 一 样 。 


17.6 ”网 站 成 品 预览 
网 站 制作 完成 后 就 可 以 在 浏览 器 中 预览 网 站 的 各 个 页 面 了 ， 操 作 步 骤 如 下 。 


使 用 浏览 器 打开 <index php>， 如 图 17-30 所 示 。 
电影 网 二 
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图 17-30 ”网 站 首页 
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EGRUP9 单 击 导航 中 的 动作 片 链接 ， 进 入 信息 列表 页 ， 如 图 17-31 所 示 。 


他 四 上 片 要 晶片 


图 17-31 信息 列表 页 
EEJe) 单 击 其 他 任 一 超级 链接 ， 进 入 信息 内 容 页 ， 如 图 17-32 所 示 。 


Ei ei AS 


负 的 人 生生 吉 一 古 
已 


17-32 ”信息 内 容 页 
EC 在 【搜索 框 】 中 输入 关键 字 “2012”， 如 图 17-33 所 示 。 
电 景 ! 叮 于 wa 


17-33 ”输入 关键 字 


ED 单 击 【 搜 索 】 按 钮 ， 可 以 实现 搜索 功能 ， 如 图 17-34 所 示 。 

EEC 在 IE 浏览 器 地 址 栏 中 输入 “http:/localhostchl16/admin/”， 打 开 【 管 理 员 登 录 画 
面 】 对 话 框 ， 在 其 中 输入 默认 的 管理 账号 及 密码 “admin”， 如 图 17-35 所 示 。 
ED 单 击 【登录 管理 画面 】 按 钮 ， 进 入 管理 界面 ， 如 图 17-36 所 示 。 

ER 单 击 管理 界面 中 的 【新 增 影片 类 别 】 连 接 ， 进 入 【新 增 影片 类 别 】 界 面 ， 如 
图 17-37 所 示 。 


四 
售 400 


有 栏目 | 流 全 风 甩 | 中 国志 影 扫 道 | 竺 上 有 沟 


- 难 :: 
- 难 : 
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当前 页 面 .电影 首页 - ;提示 页 面 


2012 最 新 剧 志 风情 《 女 
A 


smnsn x 


按 过 关键 字 : 2012 ,为 念 涛 到 33 条 信息 
17-34 ”搜索 结果 


EE 


3 后 台 管理 


ADMIN 


2017 最 新 妓 志 刚性 《 女 


2012 最 新 硬 老 出 攻 《 女 
AY 


Ds 


2012 景 新 局 志 网 营 《 女 
Ay A 


@ 洋 ”各 丰 


2012 量 新 隐 志 网管 《 廊 


ETFETT 


账号 [admin 
密码 


[ER CE 


17-35 【管理 员 登 录 画面 】 对 话 框 


参 玖 图 ,mw 
3 后 台 管 理 EE 
| | 


17-37 ”新 增 影片 类 别 界面 


输入 完 各 项 信息 之 后 
则 信息 旁 的 【编辑 】 及 【删除 】 文 字 链 接 来 执行 编辑 和 出 


EC 单 击 左 侧 导航 中 的 【新 增 影片 信息 】 链 接 ， 进 入 影片 信息 


所 示 。 


输入 各 项 信息 之 后 ， 返 


日 


zlz 旺 局 志 辆 全 《 女 


2012 旺 新 局 去 风情 《 女 。， e013 


2012 号 新风 志 风华 《 女 


站 训 


中 也 二 站 设 为 首 了 


今日 推荐 
2012 最 新生 去 剧 千 《 女 飞人 》 
zolz 最 亲 助 才 剧 千 《 女 飞人 》 
zolz 最 新 肌 吉 剧 辣 《说 人 》 
最 有 有 肌 在 剧 傅 《 女 飞 人 》 
最 亲 肌 丰 剧 六 《 娘 飞 人 》 
最 亲 肌 在 剧 全 《 妇 飞人 》 


态 将 水 忆 革 习 状 下 裤 冲 注册 人 小 中 


2012 景 区 二 出 策 《 女 飞人 》 


人 


管理 后 台 首页 
欢迎 使 用 后 台 管理 功能 


GZ 


17-36 ”管理 界面 


， 单 击 【 提 交 】 按 钮 ， 返 回 到 管理 信息 大 类 页 面 ， 使 用 每 


除 操 作 ， 如 图 17-38 所 示 。 
添加 页 面 ， 如 图 17-39 


而 ， 


到 信息 管理 界面 ， 然 后 使 用 每 则 信息 旁 的 【编辑 】 及 


【删除 】 文 字 链 接 执 行 编辑 和 删除 操作 ， 如 图 17-40 所 示 。 
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管理 影片 类 别 
I 
DD 4 称 
1 动漫 7 编 经 开除 
18 综艺 6 总 经 型 除 
17 伦理 片 5 编 加 删除 
6 科幻 片 4 编 加 型 除 
15 纪实 片 3 统 竹 草 际 
14 要 剧 片 2 编 各 到 除 
13 动作 片 纺 轻 型 除 
图 17-38 ”管理 影片 类 别 界面 
新 卉 影片 
| i 
区 一 
Ey 本 影 / 革 理 
| [动作 证 牛 四 ji 
克 于 上 ID 
Oror 新 片 口 是 日 百 全 功 枯 2012 隶 新 局 志 吕 情 《 女 飞人 》 3 出 除 
Rr BETTY TELTLEED 光 2 A -| 
ET TT EELE FETETLEIFFELE 村 动 于 2012 杀 加 二 风情 《 女 飞 入》 pr 
FEETEERTEEEEEETETTETCZEEE 下 到 kar 动 可 01? 妹 新 局 志 吕 情 《 女 飞人 Pr 
刁 的 综艺 2012 隶 新 且 志 吕 司 《 女 飞人 和 到 及 
加 六 区 olz 归 新 央 志 副 坟 《 女 飞 人 和 仙 除 
本 司 olz 录 新 甩 志 玉 二 《 女 飞人 二 从 
sr 综 2 2012 最 新 闻 志 于 《 女 飞人 了 
6 纺 2 2012 归 亲生 记 册 局 4 飞人 外 志 陀 
5 EE 012 于 正光 情 《 女 飞 人 TT 
a 区 01? 妹 大 有 下 吕 情 《 女 飞 人 rT 
EE 3 bP 2o12 录 类 志 吕 情 《 女 飞人 党 时 
EE 2 这 区 201s 昌 新 出 信康 A》 
EI -人 2 > a 六 2 2o12 归 新 央 志 吕 六 《 女 飞人 3 
三 新- 
图 17-39 ”新 增 影片 界面 图 17-40 影片 管理 界面 
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党 红酒 产品 为 主 的 电子 商务 网 站 为 
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电子 商务 类 网 
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电子 商务 类 网 站 的 开发 主要 包括 电子 商务 网 站 主 界面 制作 、 电 子 商 务 网 站 二 级 


33 
过 
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页 面 制作 和 电子 商务 网 站 后 台 的 制作 。 本 章 以 经 


例 介 绍 其 制作 方法 。 
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18.1 网 站 分 析 及 准备 工作 
在 开发 网 站 之 前 ， 首 先 需要 对 网 站 进行 分 析 ， 并 做 一 些 准备 工作 。 


18.1.1 设计 分 析 


商务 类 网 站 一 般 侧 重 于 向 用 户 传达 企业 信息 ， 包 括 企业 的 产品 、 企 业 的 新 闻 资 讯 、 企 业 
销售 网 络 、 联 系 方式 等 ， 让 用 户 快速 了 解 企业 的 最 新 产品 和 最 新 资讯 ， 为 用 户 咨询 信息 提供 
联系 方式 。 

本 实例 使 用 红色 为 网 站 主 色调 ， 让 用 户 打开 页 面 就 会 产生 记忆 识别 。 整 个 页 面 以 产品 、 
资讯 为 重点 ， 舒 适 的 主题 色 加 上 精美 的 产品 图 片 ， 可 以 增加 用 户 的 购买 欲望 。 


18.1.2 ”网 站 流程 图 
本 章 所 制作 的 电子 商务 类 网 站 的 流程 图 ， 如 图 18-1 所 示 。 


电子 商务 类 网 站 


由 


新 闻 列表 | | 新 闻 内 容 | | 新 闻 列表 | | 新 闻 内 容 
v 


news/index.php chanpin/index.php 
index.php adminLogin.php 


news/inewcont.php chanpin/procont.php 


后 台 管 理 页 面 admin/index.php 


企业 新 闻 维护 一 +” newsadd.php、 newsadmin.php、 newsfix.php、 newsdel.php 


灌 左 只 十 


产品 类 别 维护 classadd.php、 classadmin.php、classfix.php、classdel.php 
和 


产品 信息 维护 | 一 proadd.php、proadmin.php、profix.php、prodel.php 


图 18-1 网 站 的 流程 图 


二 
使 404 


18.1.3 数据库 分 析 


1. MySQL 数据 库 的 导入 

将 本 章 范 例文 件 夹 中 的 < 源 文件 ch14> 完 整 复制 到 C:\Apache2.2\htdocs 中 ， 之 后 就 可 以 开 
始 网 站 的 规划 设计 了 。 

在 该 目录 中 有 本 章 范例 所 使 用 的 数据 库 备 份 文件 <db_14.sql>， 将 其 导入 ， 其 中 包含 了 四 
个 数据 表 : admin、news、proclass、product。 

2. 数据 表 分 析 


导入 数据 表 之 后 ， 选 择 两 个 数据 表 后 方 的 【结构 】 文 字 链 接 ， 观 看 数据 表 内 容 ， 如 图 18-2 
所 示 。 


识 将 泓 章节 可 痰 汶 到 路 显 二 8| 洲 


表 -~ 操作 行 数 
admin 赎 浏 览 驮 结构 三 搜索 经 插入 几 清 空 @ 删除 
news 口吃 J 结构 总 搜索 录 插 入 凯 清 空 @ 删除 
proclass 国 浏览 统 结 构 态 搜索 了 插入 同 清 空 @ 删除 
product 回 浏 览 4 结构 考 搜 索 了 插入 山 清 空 @ 删除 

4 张 表 总计 


18-2 分析 数 据 表 


e@ ”admin 数据 表 : 用 于 保存 登录 管理 界面 的 账号 与 密码 ， 主 索引 栏 为 usemame 字段 ， 
如 图 18-3 所 示 。 


名 字 类 型 ”整理 属性 空 默认 额外 操作 
用 户 名 username char(20) gb2312_chinese_ci 否 多 修改 
密码 passwd char(20) gb2312_chinese_ci 否 必修 改 


18-3 admin 数据 表 
目前 数据 表 中 已 预存 有 一 条 数据 ， 如 图 18-4 所 示 ， 其 值 均 为 admin， 为 默认 使 用 的 账号 
及 密码 。 
username passwd 


admin admin 


18-4 ”数据 库 账户 


@ news 数据 表 : 用 于 网 站 每 则 企业 新 闻 的 管理 。 本 数据 表 以 news_id( 企 业 新 闻 管 理 编 
号 ) 为 主 索引 ， 并 设 定 为 UNSIGNED( 正 数 )、auto_increment( 自 动 编号 )， 从 而 使 用 户 
在 添加 数据 时 能 为 网 站 每 一 则 企业 信息 管理 都 加 上 一 个 单独 的 编号 而 不 重复 ， 如 
图 18-5 所 示 。 

@ ”proClass 数据 表 : 用 于 产品 分 类 的 管理 。 本 数据 表 以 class id (产品 类 别管 理 编号 ) 为 
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主 索 引 ， 并 设 定 为 UNSIGNED( 正 数 )、auto_increment( 自 动 编号 )， 从 而 使 用 户 在 添 
加 数据 时 能 为 每 一 则 产品 分 类 管理 都 加 上 一 个 单独 的 编号 而 不 重复 ， 如 图 18-6 所 示 。 


名 字 类 型 整理 展 性 ” 空 默认 
news_id smallint(5) UNSIGNED 否 无 
news time datetime 否 0000-0 
news_title warchar(100) gb2312_chinese_ci 区 
news editor varchar(100) gb2312_chinese_ci 否 
news_photo varchar(100) gb2312_chinese_ci 是 NULL 
news_top smallint(5) 否 0 
news_content text gb2312_chinese_ci 否 无 
图 18-5 news 数据 表 
名 字 类 型 整理 属性 ” 空 默认 
编号 class id smallint(5) UNSIGNED 否 无 
类 别名 称 classname varchar(100) gb2312_chinese_ci 否 
排序 号 classnum smallint(5) 否 0 


18-6 ”proClass 数据 表 


@ ”product 数据 表 : 主要 用 于 每 则 网 站 产品 的 管理 。 本 数据 表 以 pro_id (企业 产品 管理 
编号 ) 为 主 索引 ， 并 设 定 为 UNSIGNED ( 正 数 )、auto_increment (自动 编号 )， 从 而 使 
用 户 在 添加 数据 时 能 为 每 一 则 网 站 产品 信息 管理 都 加 上 一 个 单独 的 编号 而 不 重复 ， 
如 图 18-7 所 示 。 


名 字 类 型 整理 展 性 ” 空 默认 
编号 pro_id smallint(5) UNSIGNED 否 无 
发 布 时 间 pro_time datetime 否 0000 
产品 类 别 pro_type varchar(20) gb2312_chinese_ci 
产品 名 称 pro_name varchar(100) gb2312_chinese_ci 
产品 图 片 pro_photo varchar(100) gb2312_chinese_ci 
发 布 人 pro_editor varchar(100) gb2312_chinese_ci 


产品 信息 pro_content text gb2312_chinese_ci 
是 否 推荐 pro_top smallint(5) 


珊 碟 珊 有 到 臣 


o 


图 18-7 product 数据 表 


18.1.4 制作 程序 基本 数据 表 
如 表 18-1 所 示 是 本 章 范例 网 站 的 程序 基本 数据 表 。 


四 
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让 训 


第 

表 18-1 网 站 基本 数据 表 加 

信息 名 称 内 客 | 

网 站 名 称 CHI18 Ei 

本 机 服务 器 主 文件 夹 CaApache? 2\htdocs\ch18 by 

程序 使 用 文件 夹 C:\WApache2.2\htdocs\ch18 间 

程序 测试 网 址 http://localhost/ch18/ 沪 

MySQL 服务 器 地 址 localhost 各 

管理 账号 /密码 root/root 战 

使 用 数据 库 名 称 Db 14 

使 用 数据 表 名 称 admin、news、proclass、product 


18.2 ”网 站 结构 分 析 


本 例 中 的 网 站 首页 面 使 用 1-(1+2)-1 结构 进行 布局 ， 凸 显 网 站 的 大 器 。 整 个 页 面 非常 简洁 
明了 ， 主 要 包括 导航 、banner、 产 品 展示 、 企 业 新 闻 、 促 销 信 息 及 下 方 的 脚注 ， 如 图 18-8 
所 示 。 


GG 


网 站 首页 。 关于 开 为 企业 资讯 。 产品 联结 宣传 视频 。 人 才 招聘 。 联系 我 们 


18-8 网 站 首页 


二 级 页 面 有 多 个 ， 只 有 企业 资讯 页 和 产品 展台 需要 使 用 动态 方法 实现 ， 这 两 个 页 面 使 
用 1-2-1 型 结构 进行 布局 (在 实际 网 站 制作 中 ， 通 常设 计 者 把 变化 不 大 的 页 面 作 静 态 化 处 理 ， 
仅 对 经 常 更 新 的 页 面 进行 编程 处 理 )， 如 图 18-9 所 示 。 
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图 18-9 二 级 页 面 


18.3 ”网 站 主页 面 的 制作 


网 站 的 分 析 以 及 准备 工作 都 做 好 之 后 就 可 以 正式 进行 网 站 的 制作 了 。 下 面 以 在 Dreamweaver 
CS6 中 制作 为 例 进行 介绍 。 


18.3.1 ”管理 站 点 


制作 网 站 的 第 一 步 工作 就 是 创建 站 点 。 在 Dreamweaver CS6 中 创建 站 点 的 方法 在 前 面 的 
章节 中 已 经 介绍 ， 这 里 不 再 歼 述 。 


18.3.2 ”网 站 广告 管理 主页 面 的 制作 
下 面 只 针对 完成 页 面 制作 过 程 中 的 步骤 和 数据 绑 定 进行 讲解 。 
1. 数据 库 连接 的 设置 


在 【文件 】 面 板 选 择 要 编辑 的 网 页 <index.php>， 双 击 将 其 在 编辑 区 打开 。 然 后 切换 到 
【数据 库 】 面 板 ， 单 击 + 号 按钮 ， 在 弹出 的 菜单 中 选择 【MySQL 连接 】 菜 单 命令 ， 在 打开 的 
【MySQL 连接 】 对 话 框 中 输入 连接 的 名 称 和 MySQL 的 连接 信息 ， 单 击 【 确 定 】 按 钮 ， 如 
18-10 所 示 。 


18-10 【MySQL 连接 】 对 话 框 
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人 
2. 主要 数据 绑 定 实现 


在 首页 中 有 三 处 需要 动态 调用 数据 的 地 方 ， 分 别 是 图 片 新 闻 、 文 字 新 闻 、 促 销 产品 。 这 
就 有 一 个 问题 ， 同 样 是 新 闻 ， 那 么 该 如 何 区 分 图 片 新 闻 与 文字 新 闻 呢 ? 如 何 区 分 哪 种 商品 出 
现在 首页 呢 ? 

下 面 就 来 介绍 如 何 将 这 些 数据 绑 定 到 网 页 中 ， 具 体 的 操作 步骤 如 下 。 

EC 打开 数据 【 绑 定 】 面 板 ， 这 里 需要 三 个 数据 绑 定 记录 集 ， 分 别 对 应 图 片 新 闻 、 

文字 新 闻 、 促 销 产 品 ， 如 图 18-11 所 示 。 


束 将 淹 书 民 习 类 类 到 中 四 二 8| 小 


图 18-11 【 绑 定 】 面 板 


ET 单 击 打开 图 片 新 闻 记 录 集 Recnewstop， 在 SQL 语句 后 面 ， 有 一 个 limitl 指令 ， 
该 指令 的 用 途 是 从 数据 表 中 取出 一 条 数据 ， 整 个 sql 语句 的 意思 是 从 news 表 中 取出 
推荐 的 图 片 不 为 空 的 最 新 发 布 的 一 条 数据 。 如 果 数 据 量 比较 大 ， 使 用 limit 指令 就 显 
得 非常 有 必要 ， 可 以 大 大 提高 数据 的 检索 效率 ， 如 图 18-12 所 示 。 

由 于 仅 获取 一 条 信息 ， 不 需要 设置 重复 区 域 ， 因 此 接着 设 定 跳 转 至 详细 信息 页 
面 ， 如 图 18-13 所 示 。 


Saas Ou sn 
Dees 


图 18-12 【记录 集 】 对 话 框 图 18-13 ”设置 跳 转 至 详细 信息 页 面 


EC 单 击 打开 Recnews 记录 集 ， 该 记录 和 集 设置 的 目的 是 为 了 获取 6 条 最 新 的 企业 新 
闻 。SQL 语句 的 意义 是 从 news 表 中 取出 6 条 最 新 发 布 的 新 闻 信息 ， 如 图 18-14 
所 示 。 

ECEDp 在 设 定 重复 区 域 的 时 候 设 定 记 录 条 数 为 6， 如 图 18-15 所 示 。 

ED 设 定 跳 转 详 细 页 面 ， 如 图 18-16 所 示 。 

ET 打开 促销 产品 记录 集 (Recprotop)， 该 记录 集 目的 是 为 了 从 产品 数据 表 product 中 
取出 最 新 一 条 推荐 到 首页 的 产品 信息 ， 如 图 18-17 所 示 。 
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图 18-14 【记录 集 】 对 话 框 图 18-15 【重复 区 域 】 对 话 框 


代入 vi 9 
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图 18-16 设置 跳 转 详细 页 面 图 18-17 【记录 集 】 对 话 框 


四 于 BY 因为 仅 获取 一 条 记录 ， 也 不 需要 设置 重复 区 域 ， 因 此 接着 设 定 跳 转 至 详细 信息 
页 面 ， 如 图 18-18 所 示 。 


To Detail Page 


信息 页 ;charpir/Droccnt php 
仿 表 mL 电路 PrC_id 
让 弛 和 becom 
列 [msi 


伟 现 有 参数 : 中 nu 参数 
口 表 ps 儿 


18-18 设置 跳 转 至 详细 信息 页 面 
18.4 网 站 二 级 页 面 的 制作 


前 边 已 经 提 到 需要 动态 化 的 二 级 页 面 有 两 个 ， 一 个 是 企业 新 闻 列 表 页 ， 一 个 是 产品 展示 
列表 页 。 


18.4.1 企业 新 闻 列 表 页 
在 【文件 】 面 板 中 打开 news 目录 下 的 indexphp， 在 新 闻 列表 中 创建 一 个 用 于 获取 所 有 
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企业 新 闻 的 记录 集 Recnews， 在 绑 定 面板 中 将 其 打开 。 在 SQL 语句 中 按时 间 的 降序 排列 所 有 
记录 ， 如 图 18-19 所 示 。 


潜 将 波 阁 二 可 痰 汶 到 路 昌 二 8| 洲 


18-19 【记录 集 】 对 话 框 
列表 中 还 需要 设 定 重复 区 域 、 记 录 集 导航 条 和 显示 区 域 ， 如 图 18-20 所 示 。 


a {Recnews news._title)} 


18-20 ”新 闻 列 表 页 


18.4.2 ”企业 产品 展示 列表 页 


在 【文件 】 面 板 中 打开 chanpin 目录 下 的 index.php， 在 产品 列表 中 创建 两 个 记录 集 ， 一 
个 是 用 于 获取 所 有 推荐 的 产品 记录 集 Recprotop ， 一 个 是 用 于 获取 产品 类 别 的 记录 集 
Recproclass。 打 开 【 绑 定 】 面 板 ， 蕊 2 18-21 所 示 。 


ea onmch14. php style.css css.js AC_RunActiveContent. js 
| 丙丁 于 天 者 哆 . 世 . 内 bEF4 BC 村 可: 因 放 
重复 : 


加 {Recproclass classname} 


18-21 【 绑 定 】 面 板 


制作 企业 产品 展示 列表 页 的 操作 步骤 如 下 。 
EC 打开 Recproclass 记录 集 ，SQL 语句 的 意思 是 从 产品 类 别 表 选择 所 有 记录 ， 并 按 
classnum 升序 排列 ， 如 图 18-22 所 示 。 
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18-22 【记录 集 】 对 话 框 
ED 设 定 重复 区 域 ， 选 取 所 有 记录 ， 如 图 18-23 所 示 。 
EEJRe 打开 Recprotop 记录 集 ， 该 记录 集 的 作用 是 从 产品 信息 表 中 取出 推荐 的 所 有 产品 
按 发 布 时 间 降序 排列 ， 最 后 发 布 的 产品 最 先 显示 ， 如 图 18-24 所 示 。 


EE 


18-23 【重复 区 域 】 对 话 框 18-24 【记录 集 】 对 话 框 
由 于 是 图 片 列表 ， 在 设 定 的 时 候选 择 【 服 务 器 行为 】 一 DWteam 一 Horizontal 
Looper MX， 如 图 18-25 所 示 。 
四 于 BY 打开 Horizontal Looper MX 对 话 框 ， 在 其 中 设 定 行列 为 3 行 3 列 ， 如 图 18-26 
所 示 。 


记录 集 
重复 区 域 
记录 集 分 页 上 
ee 显示 区 域 » 
显示 记录 计数 和 
动态 文本 Becordset, TI 


Se OB | 
© Mn Records 


Go To Detail Page 
Go To Related Page 


Creates a repeating region that displays horizontally as 
wll 


让 er Fer forther informatien, dlick the hey 
on 


Ee ee Ewe team 


18-25 【记录 集 】 对 话 框 18-26 ”Horizontal Looper MX 对 话 框 
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18.5 网 站 后 台 分 析 与 讨论 


由 于 后 台 设 计 涉 及 的 功能 比较 多 ， 所 以 不 能 像 前 边 的 章节 那样 ， 直 接 进入 某 个 管理 页 
面 ， 为 此 在 设计 本 网 站 后 台 时 使 用 了 一 个 index.php 页 进行 导航 。 在 【文件 】 面 板 中 打 
admin 目录 下 index.php 页 面 ， 可 以 看 到 该 导航 页 并 没有 具体 的 页 面 功能 ， 如 图 18-27 所 示 。 


一 -一 -一 


到 后 台 管理 eres 


毒 将 站 忆 革 习 业 严 到 小 田 几 8+ 小 是 


GG 


18-27 后台 管理 页 面 


新 增 企业 新 闻 、 管 理 企业 新 闻 用 于 管理 企业 新 闻 信息 ， 新 增产 品类 别 和 管理 产品 类 别 用 
于 管理 产品 类 别 的 管理 ， 新 增产 品 信息 和 管理 产品 信息 用 于 产品 的 管理 维护 。 


18.6 ”网 站 成 品 预览 


网 站 制作 完成 后 就 可 以 在 浏览 器 中 预览 网 站 的 各 个 页 面 了 ， 操 作 步 又 如 下 。 
使 用 浏览 器 打开 <index.php> 文 件 ， 如 图 18-28 所 示 。 


网站 2L。 关于 并 为 。 企业 9 Ce 


18-28 ”网 站 首页 
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条 


EEJPy 点 击 企业 资讯 菜单 ， 进 入 信息 列表 页 ， 如 图 18-29 所 示 。 


网 站 首页 。 关于 开 为 企业 资 2 销售 网 络 。 坪 传 视 涛 。 人 才 丁 将 。 联系 我 们 


所 有 所 篇 ， 篇 您 而 篇 ! 


图 18-29 ”信息 列表 页 
区 TB 单 击 任 一 条 信息 ， 进 入 信息 内 容 页 ， 如 图 18-30 所 示 。 


网 站 首页 。 关于 开 为 企业 资讯 uy 销售 网 络 。 起 视频 。 人 才 招聘 。 联系 我 们 


| 我 们 零 开 创新 的 芝 想 而 来 


Q 有 许多 职场 人 士 执行 力 不 强 的 原因 


[| 


图 18-30 ”信息 内 容 页 
ED 点 击 导航 上 的 产品 展台 ， 进 入 产品 展示 列表 页 ， 如 图 18-31 所 示 。 


图 18-31 产品 展示 列表 页 


ED 单 击 【后 台 管 理 】 按 钮 ， 在 打开 的 【管理 员 登 陆 画 面 】 对 话 框 中 输入 默认 的 管 
理 账 号 及 密码 “admin”， 如 图 18-32 所 示 。 
EC 单 击 【登录 管理 画面 】 按 钮 ， 进 入 后 台 管 理 界面 ， 如 图 18-33 所 示 。 


Es 上 sa 


衣 后 台 


a > 区 迎合 用 后 管理 功能 


图 18-32 【管理 员 登 录 画 面 】 对 话 框 图 18-33 后台 管理 页 面 


EC 单 击 左 方 的 【新 增 企业 新 闻 】 导 航 ， 进 入 新 增 企 业 新 闻 页 面 ， 在 其 中 输入 相关 
数据 信息 ， 如 图 18-34 所 示 。 
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18-34 ”新 增 企业 新 闻 页 面 


ECERD 输入 完 各 项 信息 之 后 ， 单 击 【 提 交 】 按 钮 ， 返 回 到 管理 企业 新 闻 页 面 ， 使 用 每 
则 信息 旁 的 【编辑 】 及 【删除 】 文 字 链 接 来 执行 编辑 和 删除 操作 ， 如 图 18-35 所 示 。 
EERD) 单 击 左 侧 导航 【新 增产 品类 别 】 链 接 ， 进 入 产品 类 别 添加 页 面 ， 如 图 18-36 所 示 。 


管理 企业 新 闻 
新 闻 ID 日 期 标题 执行 功能 
13 2012-11-30 00:00:00 小 米 辣 子 或 “瘦身 ”再 上 市 人 
14 2012-11-30 00:00:00 美国 不 认可 中 概 股 纺 入 到 弥 3 新 增产 品类 别 
15 2012-12-03 00:00:00 微软 的 10 大 旱 梦 正 步 步 成 真 [图 ] [推荐 ] ” 编 纺 划 除 "Err rr 
1 2012-12-03 00:00:00 有 许多 职场 人 士 执行 力 不 强 的 原因 扣 入 过 ! si 
17 2012-12-03 00:00:00 你 是 “病态 性 上 网 ” 吗 ? 3 | 7 
[ 枉 z] [ 匿 设 ] [EE 页 
18-35 ”管理 企业 新 闻 页 面 18-36 ”新 增产 品类 别 页 面 
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EC 输入 类 别名 称 排序 号 之 后 ， 返 回 到 产品 类 别管 理 界面 ， 使 用 每 则 类 别 旁 的 【 编 
辑 】 及 【删除 】 文 字 链 接 来 执行 编辑 和 删除 功能 ， 如 图 18-37 所 示 。 


管理 产品 类 别 

"a 类别 各 称 3 扫 行 功能 
18 礼品 系列 5 编辑 型 除 
17 洋酒 系列 6 编辑 型 除 
16 红酒 系列 2 编辑 型 除 
15 啤酒 系列 3 编辑 删除 
14 清 酒 系列 2 编 轻 删除 
13 烧酒 系列 1 编辑 型 除 


18-37 ”管理 产品 类 别 
本 了 PY 单 击 左 侧 导航 【新 增产 品 信息 】， 进 入 产品 信息 添加 页 面 ， 如 图 18-38 所 示 。 
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18-38 ”新 增产 品 页 面 


EE 输入 各 项 信息 之 后 ， 返 回 到 产品 管理 界面 ， 使 用 每 则 产品 旁 的 【编辑 】 及 【市 
除 】 文 字 链 接 来 执行 编辑 和 删除 操作 ， 如 图 18-39 所 示 。 


产品 管理 

a1 烧酒 系列 。 烧酒 1 编 缉 出 除 
20 红酒 系列 红酒 6 [推荐 ] 编 入 到 除 
19 红酒 系列 红酒 5 [推荐 ] EE 要 出 除 
18 红酒 系列 红酒 4 [推荐 ] EE 要 ,5 二 
17 红酒 系列 红酒 3 [推荐 ] EE 要 出 除 
16 红酒 系列 红酒 2 [推荐 ] EE 要 ,二 
15 红酒 系列 红酒 1 [推荐 ] EE 要 出 除 
14 烧酒 系列 烧酒 EE 要 到 除 
13 红酒 系列 红酒 [推荐 ] 编 和 出 除 


18-39 ”产品 管理 界面 
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和 第 19 章 增加 点 击 率 一 一 网 站 优化 与 推广 
和 第 20 章 打造 坚实 的 堡垒 一 一 网 站 安全 与 防御 
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制作 好 一 个 网 站 后 ， 坐 等 访客 的 光临 是 不 行 的 。 放 在 互联 网 上 的 网 站 就 像 一 块 
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19.1 在 网 站 中 添加 广告 


通过 在 网 站 适当 地 添加 广告 信息 ， 可 以 给 网 站 的 拥有 者 带 来 不 小 的 收入 。 随 着 点 击 量 的 
上 升 ， 创 造 的 财富 也 越 多 。 


19.1.1 网 站 广告 分 类 


NN 网 站 广告 设计 更 多 的 时 候 是 通过 烦琐 的 工作 与 多 次 的 尝试 完成 的 。 在 实际 工作 中 ， 网 页 

SS 设计 者 会 根据 需要 添加 不 同类 型 的 网 站 广告 。 网 站 广告 的 形式 大 致 分 为 以 下 6 种。 
1. 网 幅 式 广告 

网 幅 式 广告 又 称 旗帜 广告 ， 通 常 横向 出 现在 网 页 中 ， 最 常见 的 尺寸 是 468x60 像素 和 

468x80 像素 ， 目 前 还 有 728x90 像素 的 大 尺寸 型 ， 是 网 络 广告 比较 早出 现 的 一 种 广告 形式 。 


以 往 网 幅 广 告 以 JPG 或 者 GIF 格式 为 主 ， 伴 随 着 网 络 的 发 展 ，SWE 格式 的 网 幅 广告 也 比较 常 
见 了 ， 如 图 19-1 所 示 。 


2. 弹出 式 广告 


弹出 式 广告 是 互联 网 上 的 一 种 在 线 广告 形式 ， 意 图 透 过 广告 来 增加 网 站 流量 。 用 户 进入 
网 页 时 ， 会 自动 开启 一 个 新 的 浏览 器 视窗 ， 以 吸引 读者 直接 到 相关 网 址 浏览 ， 从 而 收 到 宣传 
之 效 。 这 些 广告 一 般 都 透 过 网 页 的 JavaScript 指令 来 启动 ， 但 也 有 通过 其 他 形式 启动 的 。 由 于 
弹出 式 广告 过 分 泛滥 ， 很 多 浏览 器 或 者 浏览 器 组 件 也 加 入 了 弹出 式 窗口 杀手 的 功能 ， 以 屏蔽 
这 样 的 广告 ， 如 图 19-2 所 示 。 


天 机 票 这 E 和 
2 名 有 


图 19-1 网 幅 式 广告 图 19-2 弹出 式 广告 


3. 按钮 式 广告 


按钮 式 广告 是 一 种 小 面积 的 广告 形式 ， 这 种 广告 形式 被 开发 出 来 主要 有 两 个 原因 ， 一 方 
面 可 以 通过 减 小 面积 来 降低 购买 成 本 ， 让 小 预算 的 广告 主 能 够 有 能 力 购买 ， 另 一 方面 是 为 了 
更 好 地 利用 网 页 中 面积 比较 小 的 零散 空白 位 。 

常见 的 按钮 式 广告 有 125x125 像素 、120x90 像素 、120x60 像素 、88X314 像素 等 4 种 尺 
寸 。 在 购买 的 时 候 ， 广 告 主 也 可 以 购买 连续 位 置 的 几 个 按钮 式 广告 组 成 双 按钮 广告 、 三 按钮 
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横幅 式 广告 是 通栏 式 广告 的 初步 发 展 阶段 ， 初 期 用 户 认 可 程度 很 高 ， 有 不 错 的 效果 。 但 
是 伴随 着 时 间 的 推移 ， 人 们 对 横幅 式 广告 已 经 开始 变 得 麻木 。 于 是 广告 主 和 媒体 开发 了 通栏 
式 广告 ， 它 比 横幅 式 广告 更 长 ， 面 积 更 大 ， 更 具有 表现 力 ， 更 吸引 人 。 一 般 的 通栏 式 广告 尺 
寸 有 590x105 像素 、590x80 像素 等 ， 已 经 成 为 一 种 常见 的 广告 形式 ， 如 图 19-5 所 示 。 


6. 浮动 式 广告 
浮动 式 广告 是 网 页 页 面 上 悬浮 或 移动 的 非 鼠 标 响应 广告 ， 形 式 可 以 为 Gif 或 Flash 等 格 
式 ， 如 图 19-6 所 示 。 


| 
mn 
第 
广告 等 ， 以 加 强 宣传 效果 。 按 钮 式 广告 一 般 容量 比较 小 ， 常 见 的 有 JPEG、GIF、Flash 等 几 格 国 
式 ， 如 图 19-3 所 示 。 章 
4. 文字 链接 广告 如 
文字 链接 广告 是 一 种 最 简单 、 最 直接 的 网 上 广告 ， 只 需 将 超 链接 加 入 相关 文字 便 可 , 如 击 
图 19-4 所 示 。 | 
i 外 虽 
四 纤 体 健身 死 飞 计 衣 跑步 机 短路 个 
[9 电脑 客户 轴 ee 5. 
Download 和 背包 单 让 包 军 述 由 党 品牌 所 权 和 推 
耐克 阿迪 361 安 篇 李宁 ERKE [ 

图 19-3 按钮 式 广告 图 19-4 文字 链接 广告 NN 

5. 横幅 式 广告 N 


二 将 士 卡车 可 让 夫 水 上 过 二 六 入 你 新 负 于 区 此地 考 蝇 0 的 小 所 
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质量 鉴定 无 优 购 机 


mn, : 
hp/ mm bod com cpre PhP He AOes ThaV 7 BSNi ln ica ME VANINHCNO NOscebEFS IDD ~ 


19-5 ”横幅 广告 19-6 浮动 广告 


19.1.2 ”添加 网 站 广告 


网 站 广告 的 种 类 很 多 ， 下 面 以 添加 漂浮 广告 为 例 ， 讲 解 如 何在 网 站 上 添加 广告 。 具 体操 
作 步 又 如 下 。 
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EEC 启动 Dreamweaver CS6， 打 开 随 书 光盘 中 的 chl9\index.htm 文件 ， 如 图 19-7 
所 示 。 
EERP29 单 击 【代码 】 按 钮 ， 将 下 面 的 代码 复制 到 </body> 之 前 的 位 置 。 


<div id="ad" style="position:absolute"><a href="http://www.baidu.com"> 
<img src="images/ 星 座 -jpg" border="0"></a> 
</div> 
<script language="javascript"> 
var x = 50,y = 60 
var xin = true, yin = true 
Var step=1 
var delay = 10 
Var obj=document .getElementById("ad") 
function floatAD() { var L=T=0 
Var R= document .body.clientWidth-obj.offsetWidth 
var B = document .body.clientHeight-obj.offsetHeight 
obj.style.left = x + document.body.scrollLeft 
obj.style.top = Y + document .body.scrollTop 
X= XxX+ step*(xin?1:-1) 


if (x < L) { xin = true; x = L} 
if (x > R){ xin = false; x = R} 
y= y+ step*(yin?1:-1) 

if (y < T) { yin = true; y= T})} 


if (y > B) { yin = false; y=B}} 
Var itl= setInterval ("floatAD()", delay) 
obj .onmouseover=function() {clearInterval (itl1)} 
obj .onmouseout=function() {itl=setInterval ("floatAD()", delay)} 


EGRS9 保存 网 页 ， 然 后 在 浏览 器 中 浏览 网 页 ， 如 图 19-8 所 示 。 
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19-7 ”打开 素材 文件 图 19-8 ”预览 网 页 


19.2 ”添加 实用 查询 工具 


在 制作 好 的 网 页 中 ， 还 可 以 添加 一 些 实用 查询 工具 ， 比 如 天 气 预 报 、IP 查询 、 万 年 历 、 


刀 6| 小 和 


列车 时 刻 查 询 等 。 

19.2.1 添加 天 气 预报 增 
在 网 页 中 添加 天 气 预报 的 具体 步骤 如 下 。 到 
EEJDp 打开 随 书 光盘 中 的 “素材 'ch1%\ 网 址 导航 .html” 文 件 ， 选 择 文字 “天 气 ”， 如 | 

图 19-9 所 示 。 
EEJpp 在 【属性 】 面 板 的 【链接 】 文 本 框 中 输入 “http://www.weather.com.cn/”， 如 站 

图 19-10 所 示 。 化 
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图 19-9 ”选择 天 气 文本 图 19-10 在 【属性 】 面板 中 输入 链接 地 址 


EEJRB) 保存 文件 ， 按 F12 键 预览 ， 然 后 单 击 【和 天气】 文字 ， 页 面 就 会 跳 转 到 天 气 查 询 
页 面 ， 如 图 19-11 所 示 。 


高 考 天 气 : 雨 获 中 东部 江南 华南 局 部 大 暴雨 


上 三 州 ” 起 & ”和 生 天， 高大 十 天 入 括 杉 大 %， 作 和 天 "2 
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19-11 ”预览 网 页 


19.2.2 添加 IP 查询 
在 网 页 中 添加 卫 查询 的 具体 步骤 如 下 。 
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案例 课堂 ~ 
ET 打开 随 书 光盘 中 的 “素材 ch28\ 网 址 导航 .html” 文 件 ， 选 择 文字 全 ， 如 图 19-12 
所 示 。 
TY 在 【属性 】 面 板 的 【链接 】 文 本 框 中 输入 “http://wwwip138.com/”， 如 图 19-13 
所 示 。 


你 乐 休闲 提 了 
| : 
和 章 乐 视频 请 戏 电影 有 | 音乐 视频 游戏 电影 
| 血 烛 吾 辐 直 | = | 砚 惕 又 芋 
ee [| 
: 
: 
: 
: 
| 


上 生肖 用 务 
| 和 和 5 孟 于 咎 : 


图 19-12 选择 IP 文 本 19-13 在 【属性 】 面 板 中 输入 链接 地 址 


EBD 保存 文件 ， 按 F12 键 预览 ， 然 后 单 击 卫 文字 ， 页 面 就 会 跳 转 到 卫 查询 页 面 ， 如 
图 19-14 所 示 。 
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| 下 天气 所 报 -预报 五 天 二 下 省 机 可 所 在 岳 区 喜光 
人 大 全 图 片 及 报价 
人 过 a 和 
身 全 证 各 科 查验 证 快递 查询 ES 查询 全 国 各 地 车 株 查 询 表 


www. ip138. com IP 查 询 (搜索 IP 地 址 的 地 理 位 置 ) 


您 的 IP 是 ，[123. 6. 239. 100] 来 自 ， 河 南 省 郑州 市 圈 通 


在 下 直 输 入 框 中 输入 您 茧 查询 的 JP 地址 拒 名 ， 点 击 查询 
接合 即 可 查询 该 JP 所属 的 区 : 


TP 地 址 或 者 域名 : 

| p138 专 业 7+24/ 小 9 为 您 服务 

| 主 : 本 站 给 JP 数 所 这 力 昌 全 纺 扫 所 诺 , 每 10 天 日 示 于 生 一 闪 - 
| 


19-14 ”预览 网 页 


19.2.3 ”添加 万 年 历 


在 网 页 中 添加 卫 查询 的 具体 步骤 如 下 。 

区 了 TY 打开 随 书 光盘 中 的 “素材 \ch28\ 网 址 导航 . html” 文 件 ， 选 择 文字 “万 年 历 ”， 如 
图 19-15 所 示 。 

ED 在 【属性 】 面 板 中 的 【链接 】 文 本 框 中 输入 “http://www.nonglinet/”， 如 图 19-16 
所 示 。 
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19-15 ”选择 万 年 历 文本 19-16 在 【属性 】 面 板 中 输入 链接 地 址 


本 于 BY 保存 文件 ， 按 F12 键 预 览 ， 然 后 单 击 【 万 年 历 】 文 字 ， 页 面 就 会 跳 转 到 万 年 历 
查询 页 面 ， 如 图 19-17 所 示 。 


[<¢ ET EIT Cr 


图 19-17 预览 网 页 
19.2.4 添加 列车 时 刻 查询 


在 网 页 中 添加 了 王 查询 的 具体 步骤 如 下 。 
打开 随 书 光盘 中 的 “素材 \ch28\ 网 址 导航 .html” 文 件 ， 选 择 文字 “列车 时 刻 查 
， 如 图 19-18 所 示 。 
EDD) 在 【属性 】 面 板 的 【链接 】 文 本 框 中 输入 “http://www.12306.cn/mormhweb/”， 
如 图 19-19 所 示 。 
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19-18 ”选择 列车 时 刻 表 文本 19-19 在 【属性 】 面 板 中 输入 链接 地 址 


EGR 保存 文件 ， 按 F12 键 预览 ， 然 后 单 击 【 列 车 时 刻 查询 】 文 字 ， 页 面 就 会 跳 转 到 
列车 时 刻 查询 页 面 ， 如 图 19-20 所 示 。 
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19.3 ”网 站 的 宣传 与 推广 


网 站 做 好 后 ， 需 要 大 力 地 宣传 和 推广 ， 只 有 如 此 才能 让 更 多 的 人 知道 并 浏览 。 宣 传 广告 
的 方式 很 多 ， 包 括 利用 大 众 传媒 、 网 络 传媒 、 电 子 邮 件 、 留 言 本 与 博客 、 在 论坛 中 宣传 。 效 
果 最 明显 的 是 网 络 传媒 的 方式 。 


19.3.1 网 站 宣传 实用 策略 


除了 本 章 前 面 所 讲述 的 宣传 方法 外 ， 还 有 以 下 一 些 比较 实用 的 网 站 宣传 技巧 。 
(D 利用 聊天 室 宣 传 网 站 。 先 在 聊天 室 的 公告 中 对 所 有 人 进行 宣传 ， 然 后 再 对 每 个 聊天 
室 的 人 挨个 儿 宣传 。 很 多 大 型 网 站 聊天 室 里 每 天 都 有 很 大 流量 的 聊天 人 员 ， 所 以 这 种 方法 见 


效 比 较 快 。 但 是 需要 注意 的 是 : 因为 大 部 分 聊天 室 都 禁止 发 送 广告 性 质 的 信息 ， 所 以 在 语言 
上 需要 好 好 其 酌 才 行 。 一 般 情况 下 ， 不 要 和 聊天 室 的 管理 人 员 聊 天 ， 否 则 马上 会 被 赶 出 聊 
天 室 。 

(2) 利用 搜索 引擎 宣传 网 站 。 搜 索引 擎 是 一 个 进行 信息 检索 和 查询 的 专门 网 站 。 很 多 网 
站 的 宣传 都 是 依靠 搜索 引擎 来 宣传 ， 因 为 网 上 很 多 浏览 者 都 是 通过 搜索 引擎 查找 相关 信息 。 
比如 很 多 人 都 习惯 利用 百度 搜索 信息 ， 所 以 如 果 在 百度 引擎 上 注册 你 的 网 站 ， 被 搜索 到 机 会 
就 很 大 。 当 然 ， 读 者 还 需要 好 好 研究 一 下 网 站 的 关键 字 ， 这 对 增 大 网 站 被 搜索 的 几率 很 重 
要 。 国 内 此 类 网 站 很 多 ， 比 如 百度 、 网 易 、 搜 狐 、 中 文雅 虎 等 ， 填 份 表格 ， 就 能 成 功 注册 ， 
以 后 浏览 者 就 能 在 这 些 引擎 中 查 到 相关 的 网 页 。 

(3) 利用 QQ 宣传 网 站 。 目 前 ， 很 多 网 页 浏览 者 都 有 自己 的 QQ， 所 以 利用 QQ 宣传 也 是 
一 个 比较 实用 的 方法 。 首 先 要 多 注册 几 个 QQ 号 码 ， 然 后 在 QQ 中 创建 不 同 的 分 组 ， 依 次 添 
加 陌生 人 ， 开 始 宣传 网 站 。 一 般 以 创业 为 向 导 ， 找 到 和 浏览 者 共同 的 兴趣 点 。 如 果 浏 览 者 感 
兴趣 ， 则 继续 聊 下 去 ， 否 则 不 需要 打扰 别人 ， 继 续 寻 找 下 一 个 目标 。 根 据 以 往 的 网 站 宣传 经 
验 ， 这 种 方法 见效 比较 快 。 


19.3.2 利用 大 众 传媒 进行 推广 


大 众 传媒 通常 包括 电视 、 书 刊 报纸 、 户 外 广告 以 及 其 他 印刷 品 等 。 
1. 电视 


目前 ， 电 视 是 最 大 的 宣传 媒体 。 如 果 在 电视 中 做 广告 ， 一 定 能 收 到 像 其 他 电视 广告 商品 
一 样 家 喻 户 晓 的 效果 ， 但 对 于 个 人 网 站 而 言 就 不 太 适 合 了 。 

2. 书刊 报纸 

报纸 是 仅 次 于 电视 的 第 二 大 媒体 ， 也 是 使 用 传统 方式 宣传 网 站 的 最 佳 途径 。 作 为 一 名 电 
脑 爱好 者 ， 在 使 用 软 硬 件 和 上 网 的 过 程 中 ， 通 常 也 积累 了 一 些 值得 与 别人 交流 的 经 验 和 心 
得 ， 那 就 不 妨 将 它 写 出 来 ， 写 好 后 寄 往 像 《电脑 爱好 者 杂志 》 等 比较 著名 的 刊物 ， 从 而 让 更 
多 的 人 受益 。 可 以 在 文章 的 末尾 注 明 自己 的 主页 地 址 和 E-mail 地 址 ， 或 者 将 一 些 难以 用 书稿 
方式 表达 的 内 容 放 在 自己 的 网 站 中 表达 。 如 果 文章 很 受 欢迎 ， 那 么 就 能 吸引 更 多 的 朋友 前 来 
访问 自己 的 网 站 。 

3. 户外 广告 

在 一 些 繁华 、 人 流量 大 的 地 段 的 广告 牌 上 做 广告 也 是 一 种 比较 好 的 宣传 方式 。 目 前 ， 在 竺 
头 、 地 铁 内 所 做 的 网 站 广告 就 说 明了 这 一 点 ， 但 这 种 方式 比较 适合 有 实力 的 商业 性 质 的 网 站 。 

4. 其 他 印刷 品 

公司 信 筹 、 名 片 、 礼 品 包装 等 都 应 该 印 上 网 址 名 称 ， 让 客户 在 记 住 你 的 名 字 、 职 位 的 同 
时 ， 也 能 看 到 并 记 住 你 的 网 址 。 


全 阐 灿 并 认 民 习 一 一 凤 币 水 车 旋 ” 几 6 小 是 


4227@ 


Dreamweaver 动态 网 站 开发 
案例 课堂 Bp-… 


19.3.3 利用 网 络 媒介 进行 推广 


由 于 网 络 广告 的 对 象 是 网 民 ， 具 有 很 强 的 针对 性 ， 因 此 ， 使 用 网 络 广告 不 失 为 一 种 较 好 
的 宣传 方式 。 

1. 网 络 广告 

在 选择 网 站 做 广告 的 时 候 ， 需 要 注意 以 下 两 点 。 

(1) 应 选择 访问 率 高 的 门户 网 站 ， 只 有 选择 访问 率 高 的 网 站 ， 才 能 达到 “ 广 而 告 之 ”的 
效果 。 

(2) 优秀 的 广告 创意 是 吸引 浏览 者 的 重要 “手段 ”， 要 想 唤起 浏览 者 点 击 的 欲望 ， 就 必 
须 给 浏览 者 点 击 的 理由 。 因 此 ， 图 形 的 整体 设计 、 色 彩 和 图 形 的 动态 设计 以 及 与 网 页 的 搭配 
等 都 是 极其 重要 的 ， 如 图 19-21 所 示 为 天 天 营养 网 首页 ， 在 其 中 就 可 以 看 到 添加 的 网 络 广告 
信息 。 

2. 电子 邮件 

这 个 方法 对 自己 熟悉 的 朋友 使 用 比较 有 效 ， 或 者 在 主页 上 提供 更 新 网 站 邮件 订阅 功能 
- 旦 自己 的 网 站 有 更 新 ， 便 可 通知 网 友 了 。 如 果 随便 地 向 自己 不 认识 的 网 友 发 E-mail 宣传 自 
己 主 页 的 话 ， 就 不 太 友好 了 。 有 些 网 友 会 认为 那 是 垃圾 邮件 ， 以 至 于 给 网 友 留 下 不 好 的 印 
象 ， 并 列 入 黑 名 单 或 拒 收 邮件 列表 内 ， 这 样 对 提高 自己 网 站 的 访问 率 并 无 实质 性 的 帮助 ， 而 
且 若 未 经 别人 同意 就 三 番 五 次 地 发 出 一 样 的 邀请 信 ， 也 是 不 礼貌 的 。 

发 出 的 E-mail 邀请 信 要 有 诚意 ， 态 度 要 和 广 ， 并 将 自己 网 站 更 新 的 内 容 简要 地 介绍 给 网 
友 ， 倘 若 网 友 表 示 不 愿意 再 收 到 类 似 的 信件 ， 就 不 要 再 将 通知 邮件 寄 给 他 们 了 ， 如 图 19-22 
所 示 为 邮箱 登录 页 面 。 


图 19-21 天 天 营养 网 图 19-22 ”电子 邮件 广告 
3. 留言 板 、 博 客 


处 处 留言 、 引 人 注意 也 是 一 种 很 好 的 宣传 自己 网 站 的 方法 。 在 网 上 浏览 当 看 到 一 个 不 错 
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的 网 站 时 ， 可 以 考虑 在 这 个 网 站 的 留言 板 中 留 下 赞美 的 语句 ， 并 把 自己 网 站 的 简介 、 地 址 一 
并 写 下 来 ， 将 来 其 他 朋友 留言 时 看 到 这 些 留言 ， 说 不 定 就 会 有 兴趣 到 你 的 网 站 中 去 参观 
一 下 

随 着 网 络 的 发 展 ， 现 在 诞生 了 许多 个 人 博客 ， 在 博客 中 也 可 以 留 下 你 宣传 网 站 的 语句 。 
还 有 一 些 是 商业 网 站 的 留言 板 、 博 客 等 ， 比 如 网 易 博 客 等 ， 每 天 都 会 有 数 百 人 在 上 面 留言 ， 
访问 率 较 高 ， 在 那里 留言 对 于 让 别人 知道 自己 网 站 的 效果 会 更 明显 ， 如 图 19-23 所 示 为 网 易 
博客 的 首页 。 

留言 时 的 用 语 要 真诚 、 简 洁 ， 切 莫 将 与 主题 无 关 的 语句 也 写 在 上 面 。 留 言 篇 幅 要 尽量 简 
短 ， 不 要 将 同一 篇 留言 反复 地 写 在 别人 的 留言 板 上 。 

4. 网 站 论坛 

目前 ， 大 型 的 商业 网 站 中 都 有 多 个 专业 论坛 ， 有 的 个 人 网 站 上 也 有 论坛 ， 那 里 会 有 许多 
人 在 发 表 观 点 ， 在 论坛 中 留言 也 是 一 种 很 好 的 宣传 网 站 的 方式 ， 如 图 19-24 所 示 为 天 涯 论坛 
首页 。 
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19-23 网易 博客 19-24 ”天 涯 论坛 


19.3.4 利用 其 他 形式 进行 推广 


大 众 媒体 与 网 络 媒体 是 比较 常见 的 网 站 推广 方式 ， 下 面 再 来 介绍 几 种 其 他 推广 方式 。 

1. 注册 搜索 引擎 

在 知名 的 网 站 中 注册 搜索 引擎 ， 可 以 提高 网 站 的 访问 量 。 当 然 ， 很 多 搜索 引擎 (有 些 是 竞 
价 排名 ) 是 收费 的 ， 这 对 商业 网 站 可 以 使 用 ， 对 个 人 网 站 就 有 点 不 好 接受 了 ， 如 图 19-25 所 示 
为 百度 网 站 的 企业 推广 首页 。 

2. 和 其 他 网 站 交换 链接 

对 于 个 人 网 站 来 说 ， 友 情 链接 可 能 是 最 好 的 宣传 网 站 的 方式 。 跟 访问 量 大 的 、 优 秀 的 个 
人 网 页 相互 交换 链接 ， 能 大 大 地 提高 网 页 的 访问 量 ， 如 图 19-26 所 示 为 某 个 网 站 的 友情 链接 
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图 19-25 百度 推广 首页 图 19-26 ”网 站 友情 链接 


这 个 方法 比 参加 广告 交换 组 织 要 有 效 得 多 ， 起 码 可 以 选择 将 广告 放置 到 哪个 网 页 。 能 选 
择 与 那些 访问 率 较 高 的 网 页 建立 友情 链接 ， 这 样 造访 网 页 的 网 友 肯 定 会 多 起 来 。 

友情 链接 是 相互 建立 的 ， 想 要 别人 加 上 自己 网 站 的 链接 ， 就 要 在 自己 网 页 的 首页 或 专门 
做 【友情 链接 】 的 专 页 放置 对 方 的 链接 ， 并 适当 地 进行 推荐 ， 这 样 才能 吸引 更 多 的 人 愿意 与 
你 共 建 链接 。 此 外 ， 网 站 标志 要 制作 的 漂亮 、 醒 目 ， 使 人 一 看 就 有 兴趣 点 击 。 


19.4 ”实战 演练 一 一 查看 网 站 的 流量 


添加 并 查看 网 站 流量 功能 的 具体 操作 如 下 。 
区 于 DD 在 下 浏览 器 中 输入 网 址 “http://www.cnzz.com/”， 打 开 “CNZZ 数据 专家 ”网 


的 主页 ， 如 图 19-27 所 示 。 
EEC) 单 击 【 免 费 注册 】 按 钮 进行 注册 ， 进 入 创建 用 户 界面 ， 根 据 提示 输入 相关 信 


息 ， 如 图 19-28 所 示 。 


人 A 
县 D 


19-27 “CNZZ 数据 专家 ”网 的 主页 19-28 注册 页 面 


EEJBp 单 击 【 同 意 协议 并 注册 】 按 钮 ， 即 可 注册 成 功 ， 并 进入 【添加 站 点 】 界 面 ， 如 
图 19-29 所 示 。 
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EEC 在 【添加 站 点 】 界 面 中 输入 相关 信息 ， 如 图 19-30 所 示 。 
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图 19-29 【添加 站 点 】 界 面 图 19-30 ”输入 站 点 信息 


ECEDRD9) 单 击 【确认 添加 站 点 】 按 钮 ， 进 入 【站 点 设置 】 界 面 ， 如 图 19-31 所 示 。 
EEDRD9 在 【统计 代码 】 界 面 中 单 击 【复制 到 剪 切 板 】 按 钮 ， 根 据 需 要 复制 代码 (此 处 选 
择 “ 站 长 统计 文字 样式 ”)， 如 图 19-32 所 示 。 


图 19-31 设置 站 点 界面 19-32 复制 代码 


EC 将 代码 插入 到 页 面 源码 中 ， 如 图 19-33 所 示 。 
EEJD 保存 并 预览 效果 ， 如 图 19-34 所 示 。 
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图 19-33 ”添加 代码 到 页 面 源 代码 之 中 19-34 ”预览 网 页 


区 于 BY 单 击 【站 长 统计 】 按 钮 ， 进 入 【查看 用 户 登录 】 界 面 ， 如 图 19-35 所 示 。 
EC 进入 查看 界面 ， 即 可 查看 网 站 的 浏览 量 ， 如 图 19-36 所 示 。 
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图 19-35 【查看 用 户 登录 】 界 面 图 19-36 ”网 站 的 浏览 结果 


19.5” 跟 我 练 练 手 


19.5.1 练习 目标 
能 够 熟练 掌握 本 章节 所 讲 内 容 。 
19.5.2 上 机 练习 


练习 1: 在 网 站 中 添加 广告 。 

练习 2: 在 网 站 中 添加 使 用 查询 工具 。 
练习 3: 网 站 的 宣传 与 推广 。 

练习 4: 查看 网 站 的 流量 。 
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19.6 高 手 甜 点 


甜点 1: 网 站 广告 的 摆 放 位 置 。 


由 于 人 的 眼球 会 因为 阅读 而 产生 疲劳 ， 所 以 在 越 靠 近 左 上 角 的 位 置 越 能 够 吸引 读者 的 注 
意 力 。 这 也 是 为 什么 很 多 网 站 的 logo 都 是 放 在 左上 角 ， 可 不 要 说 设计 者 都 是 干 篇 一 律 。 这 样 
子 做 其 实 是 有 好 处 的 ， 在 左上 和 角 的 logo 更 加 能 够 让 人 记 住 你 的 站 的 这 个 “品牌 ”。 

同样 ， 相 反 来 说 ， 越 是 靠 右 下 角 的 位 置 就 越 失 去 广告 的 价值 。 首 先 ， 如 果 要 强 台 将 某 个 
广告 放 在 某 个 位 置 ， 已 经 违反 了 上 面 的 原则 。 不 要 说 广告 不 会 成 为 网 站 的 一 部 分 ， 相 反 ， 会 
很 影响 来 访 者 的 视觉 ， 严 重 的 会 引起 读者 对 网 站 的 反感 ， 甚 至 不 再 访问 。 

其 次 ， 要 记 住 ， 写 博客 或 者 做 站 ,吸引 来 访 者 的 并 不 是 你 站 内 的 广告 ， 而 是 实 实在 在 的 
内 容 。 这 些 宝贵 的 位 置 ， 是 要 留 起 来 ， 让 这 些 内 容 可 以 吸引 来 访 者 ， 从 而 让 广告 有 机 会 被 看 
到 继而 被 点 击 。 


甜点 2: 正确 添加 视频 播放 器 。 


在 网 站 中 添加 视频 播放 器 时 ， 应 尽量 使 用 音乐 文件 的 相对 路 径 ， 比 如 images\yinyue.mp3。 
这 可 以 保障 当 网 页 文件 夹 的 路 径 发 生变 化 时 ， 视 频 播放 器 仍然 可 以 正常 地 连接 到 音乐 文件 。 
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网 站 攻击 技术 无 处 不 在 ， 在 某 个 安全 程序 非常 高 
于 代 码 就 可 以 让 网 站 成 为 入 侵 者 的 帮 有 内， 


1 
> 


的 一 4 


& 


3 


Dreamweaver 动态 网 站 开发 
案例 课堂 ~… 


20.1 网 站 维护 基础 知识 
在 学 习 网 站 安全 与 防御 策略 之 前 ， 用 户 需要 了 解 相关 的 网 站 基础 知识 。 
20.1.1 网 站 的 维护 与 安全 


网 站 安全 的 基础 是 系统 与 平台 的 安全 ， 只 有 在 做 好 系统 平台 的 安全 工作 后 ， 才 能 保证 网 
站 的 安全 。 目 前 ， 随 着 网 站 数量 的 增多 ， 以 及 编写 网 站 代码 的 程序 语言 也 在 不 断 地 更 新 ， 致 
使 网 站 漏洞 层出不穷 ， 黑 客 攻击 手段 不 断 变化 ， 让 用 户 防 不 胜 防 。 但 用 户 可 以 以 不 变 应 万 
变 ， 从 如 下 几 个 方面 来 防范 网 站 的 安全 。 

目前 ， 由 于 每 个 网 站 的 服务 器 空间 并 不 都 是 自己 的 。 因 为 ， 一 些小 的 公司 没有 经 济 实力 
购买 自己 的 服务 器 ， 他 们 只 能 去 租 别人 的 服务 器 ， 所 以 对 于 在 不 同 地 方 的 网 站 服务 器 空间 
其 网 站 防范 措施 也 不 尽 相 同 。 


1. 网 站 服务 空间 是 租用 的 


针对 这 种 情况 ， 网 站 管理 员 只 能 在 保护 网 站 的 安全 方面 下 功夫 ， 即 在 网 站 开发 这 块 儿 做 
一 些 安全 的 工作 。 

(1) 网 站 数据 库 的 安全 。 一 般 SQL 注入 攻击 主要 是 针对 网 站 数据 库 的 ， 所 以 需要 在 数据 
库 连 接 文件 中 添加 相应 防 攻击 的 代码 。 比 如 在 检查 网 站 程序 时 ， 打 开 那 些 含有 数据 库 操作 的 
ASP 文件 ， 这 些 文件 是 需要 防护 的 页 面 ， 然 后 在 其 头 部 加 上 相关 的 防 注 入 代码 ， 于 是 这 些 页 
面 就 能 防 注 了 ， 最 后 再 把 它们 都 上 传 到 服务 器 上 。 

(2) 堵 住 数 据 库 下 载 漏洞 ， 换 句 话说 就 是 不 让 别人 下 载 数据 库 文件 ， 并 且 数 据 库 文件 的 
命名 最 好 复杂 并 隐藏 起 来 ， 让 别人 认 不 出 来 。 有 关 如 何 防范 数据 库 下 载 漏洞 的 知识 ， 将 在 下 
一 节 进 行 详细 介绍 。 

(3) 网 站 中 最 好 不 要 有 上 传 和 论坛 程序 。 因 为 这 样 最 容易 产生 上 传 文件 漏洞 以 及 其 他 的 
网 站 漏洞 ， 关 于 这 一 点 笔者 在 网 站 漏洞 分 析 章 节 已 经 做 了 详细 的 介绍 ， 这 里 不 再 重 述 。 

(4) 对 于 后 台 管理 程序 的 要 求 是 ， 首 先 不 要 在 网 页 上 显示 后 台 管 理 程序 的 入 口 链接 ， 防 
止 黑客 攻击 ， 其 次 用 户 名 和 密码 不 能 过 于 简单 且 要 定期 更 换 。 

(5) 定期 检查 网 站 上 的 木马 ， 使 用 某 些 专门 木马 查 杀 工具 ， 或 使 用 网 站 程序 集成 的 监测 
工具 定期 检查 网 站 上 是 否 存 在 有 木马 。 另 外 还 可 以 把 网 站 上 除了 数据 库 文件 外 的 文件 ， 都 改 
成 只 读 的 属性 ， 以 防止 文件 被 算 改 。 


2. 网 站 服务 空间 是 自己 的 

针对 这 种 情况 ， 除 了 采用 上 述 几 点 对 网 站 安全 进行 防范 外 ， 还 要 对 网 站 服务 器 的 安全 进 
行 防范 。 这 里 以 Windows+IIS 实现 的 平台 为 例 ， 需 要 做 到 如 下 几 点 。 

(1) 服务 器 的 文件 存储 系统 要 使 用 NTFS 文件 系统 ， 因 为 在 对 文件 和 目录 进行 管理 方 


面 ，NTFS 系统 更 安全 有 效 。 
(2) 关闭 默认 的 共享 文件 。 


S 
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(3) 建立 相应 的 权限 机 制 ， 让 权限 分 配 以 最 小 化 权限 的 原则 分 配给 Web 服务 器 访问 者 。 

(4) 删除 不 必要 的 虚拟 目录 、 人 危险 的 IS 组 件 和 不 必要 的 应 用 程序 映射 。 

(5) 保护 好 日 志文 件 的 安全 。 因 为 日 志文 件 是 系统 安全 策略 的 一 个 重要 环节 ， 可 以 通过 
对 日 记 的 查看 ， 及 时 发 现 并 解决 问题 ， 确 保 日 志文 件 的 安全 能 有 效 提高 系统 整体 的 安全 性 。 


20.1.2 ”常见 的 网 站 攻击 方式 


网 站 攻击 的 手段 极其 多 样 ， 黑 客 常用 的 网 站 攻击 手段 主要 有 如 下 几 种 。 
1. 阻塞 攻击 


阻塞 类 攻击 手段 的 典型 攻击 方法 是 拒绝 服务 攻击 (Denial of Service，DOS)。 该 方法 是 一 类 
个 人 或 多 人 利用 网 络 协议 组 的 某 些 工具 ， 拒 绝 合法 用 户 对 目标 系统 (比如 服务 器 等 ) 或 信息 访 
问 。 攻 击 成 功 后 的 后 果 为 使 目标 系统 死机 、 使 端口 处 于 停顿 状态 等 ， 还 可 以 在 网 站 服务 器 中 
发 送 杂乱 信息 、 改 变 文件 名 称 、 删 除 关键 的 程序 文件 等 ， 进 而 扭曲 系统 的 资源 状态 ， 使 系统 
的 处 理 速度 降低 。 


2. 文件 上 传 漏洞 攻击 


网 站 的 上 传 漏洞 根据 在 网 页 文件 上 传 的 过 程 中 ， 对 其 上 传 变量 的 处 理 方式 的 不 同 ， 可 分 
为 动力 型 和 动 网 型 两 种 。 其 中 ， 动 网 型 上 传 漏洞 是 编程 人 员 在 编写 网 页 时 ， 未 对 文件 上 传 路 
径 变 量 进行 任何 过 滤 就 进行 了 上 传 ， 从 而 产生 了 漏洞 ， 以 致 用 户 可 以 对 文件 上 传 路 径 变 量 进 
行 任意 修改 。 动 网 型 上 传 漏洞 最 早出 现在 动 网 论坛 中 ， 其 危害 性 极 大 ， 使 很 多 网 站 都 遭受 攻 
击 。 而 动力 上 传 漏洞 是 因为 网 站 系统 没有 对 上 传 变量 进行 初始 化 ， 在 处 理 多 个 文件 上 传 时 ， 
可 以 将 ASP 文件 上 传 到 网 站 目录 中 所 产生 的 漏洞 。 

上 传 漏洞 攻击 方式 对 网 站 安全 威胁 极 大 ， 攻 击 者 可 以 直接 上 传 比如 ASP 木马 文件 而 得 到 
一 个 WEBSHELL， 进 而 控制 整个 网 站 服务 器 。 


3. 跨 站 脚本 攻击 


跨 站 脚本 攻击 一 般 是 指 黑客 在 远程 站 点 页 面 HTML 代码 中 插入 具有 恶意 目的 的 数据 。 用 
户 认为 该 页 面 是 可 信赖 的 ， 但 当 浏览 器 下 载 该 页 面 时， 嵌入 其 中 的 脚本 将 被 解释 执行 。 跨 站 
脚本 攻击 方式 最 常见 的 ， 比 如 通过 窃取 cookie， 或 通过 欺骗 使 用 户 打开 木马 网 页 ， 或 直接 在 
存在 跨 站 脚本 漏洞 的 网 站 中 写 入 注入 脚本 代码 ， 在 网 站 挂 上 木马 网 页 等 。 


4. 弱 密 码 的 入 侵 攻 击 


这 种 攻击 方式 首先 需要 用 扫描 器 探测 到 SQL 账号 和 密码 信息 ， 进 而 拿 到 SA 的 密码 ， 然 
后 用 SQLEXEC 等 攻击 工具 通过 1433 端口 连接 到 网 站 服务 器 上 ， 再 开设 以 系统 账号 ， 通 过 
3389 端口 登录 。 这 种 攻击 方式 还 可 以 配合 WEBSHELL 来 使 用 。 一 般 的 ASP+MSSQL 网 站 通 
常会 把 MSSQL 连接 密码 写 到 一 个 配置 文件 当中 ， 用 WEBSHELL 来 读 取 配置 文件 里 面 的 SA 
密码 ， 然 后 再 上 传 一 个 SQL 木马 来 获取 系统 的 控制 权限 。 
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5. 网 站 旁 注 入 侵 


这 种 技术 是 通过 IP 绑 定 域名 查询 的 功能 ， 先 查 出 服务 器 上 有 多 少 网 站 ， 再 通过 一 些 薄 弱 
的 网 站 实施 入 侵 ， 拿 到 权限 之 后 转 而 控制 服务 器 的 其 他 网 站 。 


6. 网 站 服务 器 漏洞 攻击 


网 站 服务 器 的 漏洞 主要 集中 在 各 种 网 页 中 。 由 于 网 页 程序 编写 得 不 严谨 ， 从 而 出 现 了 各 
种 脚本 漏洞 ， 比 如 动 网 文件 上 传 漏洞 、Cookie 欺骗 漏洞 等 都 属于 脚本 漏洞 。 但 除了 这 几 类 常 
见 的 脚本 漏洞 外 ， 还 有 一 些 专门 针对 某 些 网 站 程序 出 现 的 脚本 程序 漏洞 ， 比 如 用 户 对 输入 的 
数据 过 滤 不 严 、 网 站 源 代码 暴露 以 及 远程 文件 包含 漏洞 等 。 

对 这 些 漏洞 的 攻击 ， 攻 击 者 需要 有 一 定 的 编程 基础 。 现 在 网 络 上 随时 都 有 最 新 的 脚本 漏 
洞 发 布 ， 也 有 专门 的 工具 ， 初 学 者 完全 可 以 利用 这 些 工 具 进行 攻击 。 


20.2 ”网 站 安全 防御 策略 


在 了 解 了 网 站 安全 基础 知识 后 ， 下 面 介 绍 网 站 安全 防御 策略 。 


20.2.1 检测 上 传 文件 的 安全 性 


服务 器 提供 了 多 种 服务 项 目 ， 其 中 上 传 文件 是 其 提供 的 最 基本 的 服务 项 目 。 它 可 以 让 空 
间 的 使 用 者 自由 上 传 文件 ， 但 是 在 上 传 文件 的 过 程 中 ， 很 多 用 户 可 能 会 上 传 了 一 些 对 服务 器 
造成 致命 打击 的 文件 ， 比 如 最 常见 的 ASP 木马 文件 。 所 以 网 络 管理 员 必须 利用 入 侵 检 测 技术 
来 检测 网 页 木马 是 否 存在 ， 以 防止 随时 随地 都 有 可 能 发 生 的 安全 隐患 。“ 思 易 ASP 木马 追 
捕 ” 就 是 一 个 很 好 的 检测 工具 ， 通 过 该 工具 可 以 检测 到 网 站 中 是 否 存在 ASP 木马 文件 。 
下 面 就 来 介绍 一 下 使 用 “ 思 易 ASP 木马 追捕 ”检测 上 传 文件 是 否 是 木马 的 过 程 ， 具 体操 
作 步 骤 如 下 。 
下 载 “ 思 易 ASP 木马 追捕 2.0” 源 文件 ， 并 将 asplist2.0.asp 文件 存放 在 IS 默认 
目录 Hi:\InetpubWwwwroot， 然 后 在 【管理 工具 】 窗 口中 双击 【Intemet 信息 服务 】 按 
钮 ， 打 开 【Internet 信息 服务 】 窗 口 。 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【浏览 】 命 
令 ， 如 图 20-1 所 示 。 
EEzD 在 打开 的 窗口 中 可 以 看 到 添加 到 H:\netpub\wwwroot 目录 下 的 asplist2.0.asp 文 
件 。 在 正 浏览 器 中 打开 该 网 页 ， 在 【检查 文件 类 型 】 后 面 的 文本 框 中 输入 思 易 ASP 
木马 追捕 可 以 检查 的 文件 类 型 ， 主 要 包括 : ASP、JPG、ZIP 在 内 的 许多 种 文件 类 
型 ， 默 认 是 检查 所 有 类 型 。 在 【增加 搜索 自 定 义 关键 字 】 文 本 框 中 输入 确定 ASP 木 
马 文 件 所 包含 的 特征 字符 ， 以 增加 木马 检查 的 可 靠 性 ， 关 键 字 用 顿 号 隔 开 ， 如 图 20-2 
所 示 。 
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区 于 在 【所 在 目录 】 中 列 出 了 当前 浏览 器 的 目录 ， 上 面 显示 的 是 该 目录 包含 的 子 目 
录 ， 下 面 显示 是 该 目录 的 文件 。 此 时 单 击 目录 列 表 中 的 目录 可 以 检查 相应 的 目录 ， 
而 单 击 【 回 到 上 级 目录 】 链 接 按钮 即 可 返回 到 当前 目录 的 上 一 级 目录 ， 如 图 20-3 
所 示 。 

EEC 在 设置 好 【检查 文件 类 型 】 和 【增加 搜索 自 定义 关键 字 】 属 性 后 ， 单 击 【 确 
定 】 按 钮 ， 根 据 设置 进行 网 页 木马 的 探测 ， 如 图 20-4 所 示 。 


20-1 选择 【浏览 】 命 令 20-2 打开 asplist 2.0.asp 文件 


CE [8 roocator p- scx| esmxsprsias 


文件 们 滴灌 5 豆 覃 (V) 。 忆 苹 实 人 A) 工具 人 


思 时 A5F 木 马 锯 捕 2.0 Ps 
二 AS? 程 序 


下 
mt A RR 
inetpob Wininseripts 
NevinstoubVensterr 

NVinetpubVEtproot so 上 | 建 | 移 | 流 md| 和 5 窗 | 它 
ENinetpabvhistory T i 

Ninetpub oe 
MEVinstoub any 
EVinatpub Wwr oot. 


ee | 
本 程 厚 帕 Bluaeeyes 坊 写 ， 转 载 时 请 保留 这 些 信息 || 

于 朱峰 sluesysz 拓 写本 守信 这 此 信息 
二 珊 扫 行 兴 有 1.3 训 和 加 国 攻 2 


图 20-3 ”网 页 预览 效果 图 20-4 ”网 页 木马 探测 结果 


EECRD 在 “ 思 昂 ASP 木马 追捕 ”工具 中 可 以 查看 目录 下 的 每 一 分 文件 ， 正 常 的 网 页 文 
件 一 般 不 会 支持 删除 、 新 建 、 移 动 文件 的 操作 。 如 果 检 测 出 来 的 文件 支持 删除 、 新 
建 操作 或 同时 支持 多 种 组 件 的 调用 ， 则 可 以 确定 该 文件 为 木马 病毒 ， 直 接 将 其 删除 
即 可 。 

20-4 中 显示 的 各 个 参数 的 含义 如 下 。 

e “FSO: 即 FSO 组 件 ， 具 有 远程 删除 新 建 修改 文件 或 文件 夹 的 功能 。 
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删 : 可 以 在 线 删 除 文件 或 文件 夹 。 

建 : 可 以 在 线 新 建文 件 或 文件 夹 。 

移 : 四 

流 : 是 否 调 用 Adodbe.stream 。 

Shell: 是 否 调用 Shell，Shell 是 微软 对 一 些 常用 外 壳 操 作 函 数 的 封装 。 
WS: 是 否 调用 WSCIPT 组 件 。 

XML: 是 否 调用 XMLHTTP 组 件 。 

密 : 网 页 源 文件 是 否 加 密 。 


20.2.2 ”设置 网 站 的 访问 权限 


限制 用 户 的 网 站 访问 权限 往往 可 以 有 效 堵 住 入 侵 者 的 上 传 。 
设置 网 站 访问 权限 的 具体 操作 步骤 如 下 。 

EEDUD 在 资源 管理 器 中 右 击 Di\inetpub 中 的 www.***.com 目录 ， 在 弹出 的 快捷 菜单 中 
选择 【属性 】 命 令 ， 在 打开 的 对 话 框 中 切换 到 【安全 】 选 项 卡 ， 如 图 20-5 所 示 。 
ECERP9 在 【组 和 用 户 名 】 列 表 中 选择 任意 一 个 用 户 名 ， 然 后 单 击 【 编 辑 】 按 钮 ， 打 开 

【权限 】 对 话 框 ， 如 图 20-6 所 示 。 


规 - 安全 [详细 信息 | 避 
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20-5 【安全 】 选 项 卡 20-6 【权限 】 对 话 框 


EEJes 单 击 【 添 加 】 按 钮 ， 打 开 【 选 择 用 户 或 组 】 对 话 框 ， 在 其 中 输入 用 户 名 
“Everyone”， 如 图 20-7 所 示 。 

EEC 单 击 【确定 】 按 钮 ， 返 回 文件 夹 属性 对 话 框 中 可 看 到 已 将 Everyone 用 户 添加 到 
列表 中 。 在 权限 列表 中 选择 【 读 取 和 运行 】、【 列 出 文件 夹 目 录 】、【 读 取 】 权 限 
后 ， 单 击 【 确 定 】 按 钮 ， 即 可 完成 设置 ， 如 图 20-8 所 示 。 


安全 
对 象 名 称 : 。 It Vinetpubvwwwroet\iisstert htm 
组 或 用 户 名 (6) 

EES 

Bhdninistrat ors (EWTNT\Aninistrators) 
让 E 


选择 此 对 象 类 型 B) 1 


用 户 、 组 或 内 轩 安 全 主体 


查找 位 置 F); ne 多 许 
LEWINT 


输入 对 象 名 称 来 选择 示例 ) EE) 


[Everyone 


20-7 【选择 用 户 或 组 】 对 话 框 图 20-8 文件 夹 属性 对 话 框 


另外 ， 在 网 页 文件 夹 中 还 有 数据 库 文件 的 权限 设置 需要 进行 特别 设置 。 因 为 用 户 在 提交 
表单 或 注册 等 操作 时 ， 会 修改 到 数据 库 的 数据 ， 所 以 除了 给 用 户 读 取 的 权限 外 ， 还 需要 写 入 
和 修改 权限 ， 否 则 也 会 出 现 用 户 无 法 正常 访问 网 站 的 问题 。 

设置 网 页 数据 库 文件 的 权限 的 操作 方法 如 下 : 右 击 文件 夹 中 的 数据 库 文件 ， 在 弹出 的 快 
捷 菜 单 中 选择 【属性 】 命 令 ， 在 打开 的 属性 对 话 框 中 切换 到 【安全 】 选 项 卡 ， 在 【组 或 用 户 
名 称 】 列 表 中 选择 Everyone 用 户 ， 在 权限 列表 中 再 选择 【修改 】、【 写 入 】 权 限 。 


20.4 高 手 甜 点 


网 站 做 好 后 ， 需 要 对 网 站 进行 相应 的 维护 ， 主 要 是 对 网 站 硬件 和 软件 的 维护 。 
甜点 1: 网 站 硬件 的 维护 。 


硬件 中 最 主要 的 就 是 服务 器 ， 一 般 要 求 使 用 专用 的 服务 器 ， 不 要 使 用 PC 代替 。 因 为 专用 
的 服务 器 中 有 多 个 CPU， 并 且 硬 盘 的 各 方面 的 配置 也 比较 优秀 ， 如 果 其 中 一 个 CPU 或 硬盘 坏 
了 ， 别 的 CPU 和 硬盘 还 可 以 继续 工作 ， 不 会 影响 到 网 站 的 正常 运行 。 

网 站 机 房 通常 要 注意 室内 的 温度 、 湿 度 以 及 通风 性 ， 这 些 将 影响 到 服务 器 的 散热 和 性 能 
的 正常 发 挥 。 如 果 有 条 件 ， 最 好 使 用 两 台 或 两 台 以 上 的 服务 器 ， 所 有 的 配置 最 好 都 是 一 样 
的 ， 因 为 服务 器 经 过 一 段 时 间 要 进行 停机 检修 ， 在 检修 的 时 候 可 以 运行 别 的 服务 器 工作 ， 这 
样 不 会 影响 到 网 站 的 正常 运行 。 


甜点 2: 网 站 软件 的 维护 。 


软件 管理 也 是 确保 一 个 网 站 能 够 良好 运行 的 必要 条 件 ， 通 常 包 括 服务 器 的 操作 系统 配 
置 、 网 站 的 定期 更 新 、 数 据 的 备份 以 及 网 络 安全 的 防护 等 。 

(1) 服务 器 的 操作 系统 配置 。 

一 个 网 站 要 能 正常 运行 ， 硬 件 环境 是 一 个 先决 条 件 。 但 是 服务 器 操作 系统 的 配置 是 否 可 
行 和 设置 的 优良 性 如 何 ， 则 是 一 个 网 站 能 否 良 好 长 期 运行 的 保证 。 除 了 要 定期 对 这 些 操作 系 
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统 进行 维护 外 ， 还 要 定期 对 操作 系统 进行 更 新 ， 并 使 用 最 先进 的 操作 系统 。 一 般 来 说 ， 操 作 
系统 中 软件 安装 的 原则 是 少 而 精 ， 即 在 服务 器 中 安装 的 软件 应 尽 可 能 地 少 ， 只 要 够 用 即 可 ， 
这 样 可 防止 各 个 软件 之 间 相 互 冲突 。 因 为 有 些 软件 还 是 不 健全 的 、 有 漏洞 的 ， 还 需要 进一步 
完善 ， 所 以 安装 的 软件 越 多 ， 潜 在 的 问题 和 漏洞 也 就 越 多 。 

(2) 网 站 的 定期 更 新 。 

网 站 的 创建 并 不 是 一 成 不 变 的 ， 还 要 对 网 站 进行 定期 的 更 新 。 除 了 更 新 网 站 的 信息 外 ， 
还 要 更 新 或 调整 网 站 的 功能 和 服务 。 对 网 站 中 的 废旧 文件 要 随时 清除 ， 以 提高 网 站 的 精良 

性 ， 从 而 提高 网 站 的 运行 速度 。 不 要 以 为 网 站 上 传 、 运 行 后 便 万 事 大 吉 ， 与 自己 无 关 了 ， 其 

实 还 要 多 光顾 自己 的 网 站 ， 可 以 作为 一 个 旁观 者 来 客观 地 看 待 自己 的 网 站 ， 评 价 自己 的 网 站 
与 别 的 优秀 网 站 相 比 还 有 哪些 不 足 。 有 时 自己 分 析 自 己 的 网 站 往往 比 别人 更 能 发 现 问题 ， 然 
后 再 进一步 地 完善 自己 网 站 中 的 功能 和 服务 。 还 有 就 是 要 时 时 关注 互联 网 的 发 展 趋势 ， 随 时 
调整 自己 的 网 站 ， 使 其 顺应 潮流 ， 以 便 给 别人 提供 更 便捷 和 贴切 的 服务 。 

(3) 数据 的 备份 。 

所 谓 数据 的 备份 ， 就 是 对 自己 网 站 中 的 数据 进行 定期 备份 ， 这 样 既 可 以 防止 服务 器 出 现 
突 发 错误 丢失 数据 ， 又 可 以 防止 自己 的 网 站 被 别人 “ 黑 ” 掉 。 如 果 有 了 定期 的 网 站 数据 备 
份 ， 那 么 即使 自己 的 网 站 被 别人 “ 黑 ” 掉 了 ， 也 不 会 影响 网 站 的 正常 运行 。 

(4) 网 络 安全 的 防护 。 

所 谓 网 络 的 安全 防护 ， 就 是 防止 自己 的 网 站 被 别人 非法 地 侵入 和 破坏 。 除 了 要 对 服务 器 
进行 安全 设置 外 ， 首 要 的 一 点 是 要 注意 及 时 下 载 和 安装 软件 的 补丁 程序 。 另 外 ， 还 要 在 服务 
器 中 安装 、 设 置 防火 墙 。 防 火 墙 虽然 是 确保 安全 的 一 个 有 效 措 施 ， 但 不 是 唯一 的 ， 也 不 能 确 
保 绝 对 安全 。 为 此 ， 还 应 该 使 用 其 他 的 安全 措施 。 另 外 一 点 就 是 要 时 刻 注 意 病毒 的 问题 ， 要 
时 刻 对 自己 的 服务 器 进行 查 毒 、 杀 毒 等 操作 ， 以 确保 系统 的 安全 运行 。 

随 着 网 络 的 飞速 发 展 ， 网 络 上 的 不 安全 因素 也 越 来 越 多 ， 所 以 有 必要 保护 网 络 的 安全 。 
在 操作 计算 机 的 同时 ， 要 采用 一 定 的 安全 策略 和 防护 方法 。 比 如 提高 网 络 的 安全 意识 ， 要 养 
成 不 随意 透露 密码 、 尽 量 不 用 生日 或 电话 号 码 等 容易 被 破解 的 信息 作为 密码 ， 经 常 更 换 密 
码 ， 禁 用 不 必要 的 服务 。 在 操作 计算 机 时 ， 显 示 器 上 常常 会 出 现 一 些 不 需要 的 信息 ， 应 根据 
实际 情况 禁用 一 些 不 必要 的 服务 ， 并 安装 一 些 对 计算 机 能 起 到 保护 作用 的 程序 等 。 
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